Zen Grids: My Current Grid System of Choice

There are so many grid systems out there to choose from. With responsive design being so important for developers and designers today, I decided to take the plunge and try a couple out.

I first set up Zurb Foundation for a new project (for my portfolio site, actually). Although I know that this grid system is highly regarded and considered as one of the best, I found it to be too heavy for my needs. Zurb Foundation 4 uses Zepto in place of jQuery by default, mostly for its smaller file size, although this is configurable. One important note about Zepto is that it’s not supported on all browsers. In those cases, jQuery can be loaded as a backup.

If I was working on a larger, more complex site, I think I’d consider giving Zurb Foundation another try.

I then opted to choose between Susy and Zen Grids, which are both designed for Compass and SASS. I tried Zen Grids first, and because it did everything I needed, I never actually gave Susy a try. Susy, you’re next up! So far I’ve been happy with Zen Grids. The syntax needed in my .scss file is pretty easy to understand, as I just needed to specify the number of columns in a given grid, the number of columns for a given grid item to span, and the position (grid number) for any given grid item. The calculations for widths are then passed off to SASS to handle.

For getting started, the Zen Grids tutorial and the Zen Grid examples were both very helpful.

What CSS grid systems have you tried? Any favorites?