Everything you need to know to build for the future.

The Grid

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.

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.

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.

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.

This won't work by default in IE8 since it doesn't support :after but you can simply add a new class to override this if you run into this problem.

.four.columns

.four.columns

.four.columns

.four.columns.end

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.

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.

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 our source ordering classes, .push-#/pull-#, you can shift columns around on desktops and tablets. On phones, the grid will still be linearized into the order of the markup.

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. 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.

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 made from a ul.block-grid with #-up styles chained to it. You control how many you have in your Scss setting file or the customizer. 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. If you want to use a different layout for mobile, say .five-up for large screens and .three-up for small devices, you can simply use classes like, .mobile-three-up.

Clearing issues with IE8

Sometimes there are clearing issues in IE8. If you are seeing these issues, simply uncomment the Block Grid section within your foundation app.js file. If you don't have those line in your app.js file, copy them below: