When reading Ethan Marcotte’s article on responsive web design, I glossed over the references to fluid grids. Even without an understanding of grid systems, or grid-based designs, I found the article to be enlightening. However, I got lost as soon as I began reading his article on fluid grids. I would have been much better off starting with Chuck Greene’s article on the uses of grids in print media. His comparison of grid-less designs to grid-based designs really cleared things up for me:
… you can spot a grid-less document from a mile away —images and text float on the page in a seemingly random arrangement and elements repeated on multiple pages often appear close-to, but not in exactly the same position. Grid-less is fine if that randomness is intentional, it’s not fine if its simply a lack of planning.
In contrast, a layout built on a grid looks far more organized … The underlying grid adds a real sense of structure to the page.
I also found Raj Dash’s article on CSS grid frameworks incredibly helpful, as well as Jesse Storimer’s tutorial on the Blueprint CSS Framework. The latter is a bit outdated, so I would instead direct anyone who’s interested to the Blueprint CSS Framework Quick-Start Tutorial.
Now that I’m up to speed on grid-based designs, it’s time to tackle fluid grids again. Then, I’ll be looking at some fluid CSS grid frameworks.