The first two posts in this series cover the generalities of responsive design. Now, we’ll start digging into some responsive layouts used widely across the Web.

Imagine, if you will, that a webpage is a perfectly square waffle and each of the squares inside that waffle are a content container. If you’re a designer, you’re familiar with what those syrup-holding squares look like.

That’s right: grids. From a griddle! Who would have thought?

A young Dane Cook as "The Waffler with his Griddle of Justice"

A young Dane Cook as The Waffler with his Griddle of Justice

Grids (of Justice)

I’ve not encountered too many responsive sites that don’t have some sort of grid system, so I’ll say that responsive design is based on grids. Some of the more popular grids include the 960 Grid, Pure, Concrete, CSSwizardry-grids and, my favorite, Skeleton.

If you flip through those quickly, you’ll see that a grid system boils down to a few parts:

  1. Columns— some sort of class that dictates the width
  2. Offsets— space that the column is offset from either the left or right
  3. Clears— prevent content from overlapping oddly or getting too out of whack

In a responsive design, all columns, offsets and clears will be handled with percentage values, ensuring that no matter the size of the screen, the classes will stay true and the columns will hold their relative width.

Thinking About Columns

Still thinking about waffles? Now let’s think about a standard Web layout: header, menu, content, sidebar and footer. A majority of these pieces can be 100% in width, but once we get to the content and sidebar, we have different widths.

With a grid system in place, it’s easy to give the content a class of “two-thirds” and the sidebar a class of “one-third.” The two areas now take up the respective amount of horizontal space as seen in the example below.

[codepen_embed height=”559″ theme_id=”2547″ slug_hash=”qJDbl” default_tab=”result” user=”johnbhartley”]See the Pen From CSSwizardry-grids by John Hartley (@johnbhartley) on CodePen.[/codepen_embed]

In the grid system used above, there are no floats (common in layout), instead using the display: inline-block alignment.

float: /* left // right // none */

can pretty much do the same thing as

display: inline-block

I’ll not get too wordy on those two bits of CSS and defer to Team Treehouse.

Grid CSS Examples

CSSwizardry-grids breaks widths down into whole, halves, thirds, quarters, all the way to twelfths. Below is a look at the “tenths” grouping.

/**
 * Tenths
 */
.one-tenth { width: 10%; }
.three-tenths { width: 30%; }
.seven-tenths { width: 70%; }
.nine-tenths {width: 90%;}

In this grid system, there are already classes that handle fifths, so you don’t see 20%, 40%, 60% or 80%. No 50% is shown in these classes either because that’s handled in the halves class.

Grids: TL;DR

Grids are a great way to standardize the widths you use in responsive designs. The widths of your grids can be as simple or as complicated as you want.

Foundation can be a verbose grid system:

<div class="small-7 small-pull-5 medium-5 medium-pull-7 large-8 large-uncentered columns">

While Pure is an extremely minimal grid system:

<div class="pure-u-1-3">

In the end, you are the master of your own grid-iculous fate. My recommendation is to go with a grid that’s comfortable and easy to use. Once you’ve figured out grids, you’ll have a great understanding of how responsive design works.

Other posts in this series:

Responsive Responsible Design: An Overview
Responsible Responsive Design: Images