The Grid

Create powerful multi-device layouts quickly and easily with the 12-column, nestable Foundation 3 grid. If you're familiar with grid systems, you'll feel right at home.

The Basics

The grid is built around two key elements: rows and columns. Rows create a max-width and contain the columns; columns create the actual structure. For layouts to work properly, always put your page content inside a row and a column.

What you need to know is that columns don't have a fixed width. They can vary based on the resolution of the screen, or the size of the window (try scaling down this window to see what we mean). Design with that in mind.

Technical Details

The Foundation 3 grid, like everything else in Foundation 3, is built with box-sizing: border-box, a powerful CSS property that tells the browser to consider border and padding as part of the width of an object rather than as an addition. That enables us to construct the grid extremely simply, which is good news for anyone who lamented how difficult it was to modify the Foundation 2 grid.

Now, gutters are created simply with padding on the columns. That means columns have simple widths like 25%, or 50%. Adjusting the padding adjusts the gutters, and this can be controlled either through SCSS variables, the download customizer, or through the CSS itself.

Nesting Support

The grid allows for nesting down as far as you'd like, though at a certain point it will get absurd. You can use this nesting to create quite complex layouts, as well as some other tricks like form layouts or visual elements.

Examples

Below is a visible example of the grid. Each column block is sized based on how many of the 12 columns it takes up, and where you see thicker borders it's because two columns are running against each other.

The Foundation 3 grid uses box-sizing: border-box on every element, including the grid. Thus the columns themselves comprise both the content and the padding, which creates the gutters.

.four.columns
.four.columns
.four.columns
.three.columns
.six.columns
.three.columns
.two.columns
.eight.columns
.two.columns
.one
.eleven.columns
.two.columns
.ten.columns
.three.columns
.nine.columns
.four.columns
.eight.columns
.five.columns
.seven.columns
.six.columns
.six.columns
.seven.columns
.five.columns
.eight.columns
.four.columns
.nine.columns
.three.columns
.ten.columns
.two.columns
.eleven.columns
.one
.twelve.columns

Note: In order to work around browsers' different rounding behaviours, Foundation will float the last column in a row to the right so the edge aligns. If your row doesn't have a count that adds up to 12 columns, you can tag the last column with class="end" in order to override that behaviour.

.four.columns
.four.columns
.four.columns
.four.columns.end

Offsets

Offsets allow you to create additional space between columns in a row. The offsets run from offset-by-one all the way up to offset-by-eleven. Like the rest of the grid, they're nestable.

.one
.eleven.columns
.one
.ten.columns.offset-by-one
.one
.nine.columns.offset-by-two
.one
.eight.columns.offset-by-three
.seven.columns.offset-by-five
.six.columns.offset-by-six
.five.columns.offset-by-seven
.four.columns.offset-by-eight

Centered Columns

Centered columns are placed in the middle of the row. This does not center their content, but centers the grid element itself. This is a convenient way to make sure a block is centered, even if you change the number of columns it contains. Note: There cannot be any other column blocks in the row for this to work.

.one.columns.centered
.two.columns.centered
.three.columns.centered
.four.columns.centered
.five.columns.centered
.six.columns.centered
.seven.columns.centered
.eight.columns.centered
.nine.columns.centered
.ten.columns.centered
.eleven.columns.centered
.twelve.columns.centered

Source Ordering

Sometimes within the grid you want the order of your markup to not necessarily be the same as the order items are flowed into the grid. Using these source ordering classes, you can shift columns around on desktops and tablets. On phones, the grid will still be linearized into the order of the markup.

.two.columns
.ten.columns (last)
.three.columns
.nine.columns (last)
.four.columns
.eight.columns (last)
.five.columns
.seven.columns (last)
.six.columns
.six.columns (last)
.seven.columns
.five.columns (last)
.eight.columns
.four.columns (last)
.nine.columns
.three.columns (last)
.ten.columns
.two (last)

The syntax supports push and pull for two to ten columns, and is added directly to the columns themselves.

Mobile Grid

The grid has two modes of adapting for small displays like phones. The first requires no work at all — the grid will linearize on a small device so your columns stack vertically. This is useful to quickly adapt a desktop layout to a simple scrolling mobile layout. The other option is to use some simple classes to implement a four-column phone grid.

Four Column Mobile Grid

When you're creating your layout you can optionally attach classes that take your existing grid elements and attach them to a four column phone grid.

.three.mobile-one.columns
.nine.mobile-three.columns
.six.mobile-two.columns
.six.mobile-two.columns
.nine.mobile-three.columns
.three.mobile-one.columns
Mobile Source Ordering

You can use the same push and pull style classes on the 4-column phone grid. The syntax includes .pull-one-mobile, .pull-two-mobile, .pull-three-mobile, as well as .push-one-mobile, .push-two-mobile, .push-three-mobile.

Block Grids

Block grids are ul with two-up, three-up, four-up and five-up styles. These are ideal for blocked-in content generated by an application, as they do not require rows or even numbers of elements to display correctly.

By default, these blocks will stay in their N-up configuration on mobile devices, but you can add a class of "mobile" to have them reshuffle on smartphones into one element per line, just like the grid.

Two-up
  • Two-up element
  • Two-up element
  • Two-up element
  • Two-up element
  • Two-up element
Three-up
  • Three-up element
  • Three-up element
  • Three-up element
  • Three-up element
  • Three-up element
Four-up (Mobile)
  • Four-up element
  • Four-up element
  • Four-up element
  • Four-up element
  • Four-up element
  • Four-up element
Five-up
  • Five-up element
  • Five-up element
  • Five-up element
  • Five-up element
  • Five-up element
  • Five-up element
  • Five-up element

Get Yii Foundation

Download Yii Foundation here to get started quickly. Includes everything you need to get your proyects up and running, take a look at the Setup Guide.

Download Yii Foundation

Yii Foundation 2

Looking for Yii Foundation 2 Documentation?

Yii Foundation 2 Documentation