Implementing a CSS Grid

January 10, 2011

By: Gabriel Castillo

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: