Foundation for Site's grid is based on tried-and-true CSS — specifically, floats and clears. We developed the grid's syntax to make layout easier. That is, instead of writing endless floats and clears for each different layout element as they cropped up, we only want a few quick instructions. These instructions spell out how the layout should change depending on the size of the screen on which it's viewed.

Here's how it works:

The same block will change relative size depending on the screen on which it's viewed. For example, the red block above changes:

• six columns wide (small-6) when viewed on a smartphone
• eight columns wide (medium-8) on a medium-sized screen
• three columns wide (large-3) on a widescreen display

The blue block has similar changes, but — here's the kicker — per size, red + blue always add up to 12, which is Foundation's default row width. Speaking of which, Foundation's rows default to a maximum of 1,000 pixels wide, though you can change that in Sass.

Rows wrap horizontal sets of columns

To fully understand columns, we need to cover rows.

A "row" is a horizontal container of columns. Put another way, columns divide rows into parts. The example above used 12-column-wide rows, which is Foundation's default — 12 is easily divisible into halves, thirds and quarters. It doesn't have to, however. You can change how many columns each Foundation row has with CSS or with Sass. But for this demo we'll stick with 12.

Columns can contain any information you want, including other rows. Those sub-rows, in turn, can contain columns, which may contain rows … There's no hypothetical limit to the number of rows/columns you can nest, but we recommend no more than three levels. After that code gets messy fast.

Building a layout

Speaking of code, here's what a row looks like in HTML:

<div> … </div>

That's it. A row's a row. And adding columns is a snap.

Although you can write the small/medium/large instructions in any order you choose, we think in terms of progressive enhancement, so we start with the smartphone-savvy instructions first.

<div>

  <div class="small-6 columns">…</div>

  <div class="small-6 columns">…</div>

</div>

The two blocks above will each occupy half of a row (six out of 12 columns apiece) because "small" instructions apply to every size screen until overridden by medium or large.

Above: If you don't specify small-# to a column, Foundation will assume you mean "go full-width on small screens." Hence both the red and blue blocks span the width of a small smartphone screen, and would have done the same on a tablet — except the medium instructions said otherwise.

Same goes for blocks without medium instructions.

Above: Blocks will run as wide as they can and stack above each other until you specify otherwise. That's why we'll often see instructions chained together so each column reacts appropriately per screen size:

<div>

  <div class="small-6 medium-4 large-3 columns">…</div>

  <div class="small-6 medium-8 large-9 columns">…</div>

</div>

Does every block need small, medium and large instructions? No. Any combination is valid. But understanding the consequences is key to deciding when to use each type of instructions.

Wrapping up

Bottom line, this mobile-first approach means that large overrides medium, which overrides small. That is:

• Small-x applies to every screen size unless you add medium-x or large-x.
• Medium-x applies to every screen tablet or larger size unless you specify large-x.

Following this, check out our practical lesson on building a blog post layout with the Foundation for Sites grid.

---