is the design of kevin kennedy

Just Grid It, and Forget It

I have been spending a lot of time with grids lately. Specifically, I have been researching some alternative CSS grid frameworks to use for some recent projects. The impetus for my research was in the spirit of streamlining my workflow from desktop screens down to mobile.

Here are my reviews and considerations on what seem to be some of the more popular grid systems. Be warned, fair reader: Geekery ahead.

960 Grid System

I have using the 960 grid system for quite some time, and it has served me well. The CSS itself is very simple, and it maintains a high degree of compatibility for various browsers. Like many other designers, however, I have often found the 20 pixel gutters a bit small, and likewise, thought that the 960 pixel width could be pushed a bit more for modern desktops.

978 Grid System

This was the first alternative that I looked at, and their demo is very impressive. My thought was that the framework automatically accommodated those various screen sizes, but it does require a bit of extra work to get that effect. One of my main complaints with this framework is that it requires an extra element for clearing containers. I guess I could have hacked an alternative method in myself, but I did have another concern.

While they do provide multiple stylesheets for various screen sizes, the number of columns can change as one goes smaller or larger, basically requiring changes to markup along with the changing of stylesheets. Also, the CSS is still heavily pixel-based, and with the mobile landscape changing so rapidly, I really wanted to start investigating fluid layouts.

1040 Grid System

This one had me the most excited, the idea of one framework for desktop down to mobile is very enticing, and I really liked that they accommodate for 100 percent width backgrounds. Overall I loved the roominess of the grid, but I did have several issues with the implementation.

One issue I hit right away was the use of “overflow:hidden” to clear containers. This is elegant in theory, but there are several occasions where I want something to explicitly “break” the grid, and their solution doesn’t allow for that. To fix this I looked up some alternative float clearing methods and tweaked the CSS ever so slightly.

The other thing I found myself not really liking is the fluid nature of the grid, completely contradicting my original goals! For some reason, using a fluid grid, even with “max-width” specified, just didn’t sit well with me. For starters, I found the width to be quite large for my tastes. I also had several issues getting a content slider to work properly, since those things typically require explicit widths and heights.

Conceptually, I do not like the idea that when a user is stretching out their browser, the content just keeps creeping towards the edges. Rather than presenting the content in a viewport, the content is now responding to the viewport in a potentially uninvited and/or unexpected way.

Resizing the window can also cause elements to jump around quite a bit, which is also bad from a usability perspective. The goal of having columns collapse to smaller screen sizes is great, but in situations where an element maybe doesn’t have a defined width, you can get a weird stuttering effect. As the window gets smaller, the element moves down, then words inside start to stack, making the element shorter, so it pops back up into the available space.

My small tweak was to set a pixel width to the row container, leaving the columns defined by percentages inside. This works great for desktop browsers because it sets a comfortable width that feels wide enough to be modern, but still lets the user define extra white space. With media queries for smaller screens, I can remove the width restriction and allow the framework to work normally, since window resizing isn’t an issue there. As time goes on, I also have the flexibility of widening the grid, especially as more and more desktops move to higher resolutions.

My research in this area is far from complete, but this was the first time I jumped back into the CSS grid framework fray for quite some time, so I thought I would share!