Designing with Grids
Reda Lemeden
Lesson 32
The human brain has a penchant for identifying patterns, decoding them, then recoding them for later reuse. Not only does this cycle make it easier for us to understand the world around us, but it helps us constantly improve the tools we use to interact with it. Perhaps one of the most salient manifestions of this in the design world are grids.
Grid-based layouts stood the test of time—they predate both print and movable type—and are now a staple of modern Web design; the sheer number of tools, resources, and frameworks testifies that. This very abundance, however, makes it challenging to get started with grids, especially without proper understanding of the problems they are meant to solve.
A grid is a tool that can be used to establish a spacial hierarchy of the content. It can be fixed or fluid, horizontal or vertical, uniform or responsive. Grids should be viewed as guides, not boundaries; good designers know how to use grids, great designers know how and when to break them.
-
Getting Started: Grids are Good
Get yourself comfortable with grids and the role they have played throughout the history of design. Follow through on the example to understand the process of using a grid to lay out different content blocks and UI components. Take note of how the tabs in the features area are off the grid to better accommodate the content, a good reminder that you should not let grids dictate every design decision you make.
-
Fluid Grids
Understand the limitations of fixed-width grids and how fluid, percentage-based grids can overcome them. Sub-pixel rounding errors aside, fluid layouts have all the flexibility that the multi-platform, modern Web design requires; you'll have to try really hard to come up with a good reason to not use them.
-
The Building Blocks of a Grid System
Get familiar with the underlying concepts behind grids in Web design. Understanding these building blocks is key to effectively using grid frameworks or even building your own.
-
Adding Media Queries to the Mix
Learn how media queries can be used to build a rudimentary responsive, grid-based layout. A grid is responsive when any of its main components—number of columns, column width, and gutter width—vary inside one or more media queries.
-
Use a Responsive Grid Framework
Look at the examples of Bourbon Neat, a lightweight responsive grid framework built on top of Sass and Bourbon. Read the documentation to get familiar with concepts such as grid contexts, omega, and shifting. Use Neat to build a basic responsive layout (you may refer to the examples' markup and stylesheets.)
Reda Lemeden
Interface Designer, Thoughtbot
I'm an interface designer building iOS and Rails apps at thoughtbot in Stockholm. I write on Smashing Magazine, Giant Robots, and my own blog. I co-authored Neat and I'm currently maintaining it. Follow me on Twitter.
