Implementing a CSS Grid

The engineering team at Kiva is going through the process of examining the rich set of technologies available for improving user experiences on Kiva's website.  One such technology is the CSS grid. I recently spent some time evaluating and reading up on some of the different options that are out there, ultimately whittling down to 4 CSS grids that seemed to represent a good spectrum of what grids have to offer.

After implementing mockups with 1Kb, The Golden Grid, YAML, and 960gs our team came to the following recommendations:
  • Do not expect to use any of the grids “as is” for a production site.
  • Pool the practices and styles of the different grids in order to create a grid that works to enhance design and not confine it.
  • Build up a grid in communication with the designer
  • Keep columns and classes down to a minimum by only creating what is necessary.
  • Maintain communication across the development team, building the supporting infrastructure before implementing visual changes.

Taking the Grids For a Spin The first grid I evaluated was 1kb, which weighs in at a very minimal 640 bytes, uncompressed.  While I was inspired by 1kb’s brevity, I wasn’t crazy about it’s use of "row" and "column" divs. The Golden Grid was the second grid tested out.  I like how the Golden Grid has separate grid, reset, and typography stylesheets.  Combined, they come in at just around 4Kb and the grid stylesheet alone is just over 1Kb. Some minor things I didn’t like about this grid were its use of cramped 10px gutters and its use of a column’s width within the column’s class name. (i.e. class=”g640”).  I liked that, unlike other grids tested, it did not rely on cascading rules when designating a column element ( e.g. I could do class=”g640” instead of class=”column g640”). Following The Golden Grid I tested YAML ( Yet Another Multicolumn Layout ) and 960gs.  YAML has the most components of any of grids tested and while I don’t plan on using YAML, I do plan on going through YAML’s code again and using it as a learning tool. YAML uses a fluid layout and additionally takes advantage of media queries, both which serve as great tools for building a responsive layout. My final evaluation was of 960gs.  This is probably the grid I’ve come across the most and heard the most praise about and after using it, I can see why.  I felt that 960gs did a great job of offering robustness while at the same time avoiding many presumptions about the design.  In the situations I have come across, however, I haven’t found much use for the push_xx and pull_xx classes, and Ideally, I would prefer not having to rely on a container class in my cascading rules. The following are some of the other CSS grids that were looked into:

About the author

Gabriel Castillo

Gabriel worked 11 years as a field technician for AT&T, during which time he was involved with worker's rights and spent 5 years mobilizing and representing workers as Contractual Vice President with CWA in Oakland. After attaining a BS in Computer Science, and feeling the need for a new challenge, Gabriel left his job and backpacked across the US and Latin America for 18 months. During this time he took interest in various sustainable projects that were taking root in Central America, eventually deciding he wanted to take part in and learn more about microfinance, he applied for and was accepted to be a Kiva Fellow in Nicaragua. Gabriel's always had a passion for empowering the less fortunate, now, he's excited to pursue this passion by means of working with the Kiva engineering team and empowering Kiva's website.