What is a grid-based design?

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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s