<%= @page_title %>

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

---

Using our Predefined HTML Classes

These are examples of different ways to use the Foundation Grid. Foundation uses box-sizing: border-box so that borders and padding do not affect the overall width of the columns, making the math dead-simple. Since Foundation is mobile-first, we'll stack content by default. You do have access to an entirely separate small grid to use up to the 768px breakpoint. This means you can create some pretty complex layouts and even drop columns if you want.

<%= code_example ' ', :html %>

---

Infinitely Nest Your Grid

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.

<%= code_example ' ', :html %>

---

Offsets

Offsets allow you to create additional space between columns in a row. Like the rest of the grid, they're nestable. You can use classes like .large-offset-1 and .small-offset-3 to manipulate your column positions in different ways. You can offset up to 11 since you wouldn't ever offset a full-width column.

<%= code_example ' ', :html %>

---

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 accomplished by adding a class of large-centered or small-centered depending on which breakpoint you want the columns to center on. Small versions will carry through all breakpoints if not overridden by a large version. You can center any number of columns you have. To have a column not carry it's small-centered to large, add a class of large-uncentered.

<%= code_example ' ', :html %>

---

Source Ordering

Using these source ordering classes, you can shift columns around between our breakpoints. This means you can have a sub-nav on the left on large displays, but go below on small ones. .push-# is the syntax you'll use.

<%= code_example ' ', :html %>

---

Small Grid

As you've probably noticed in the examples above, you have access to a small and large grid. If you know that your grid structure will be the same for small devices as it will be on large devices, just use the small grid. You can override your small grid classes by adding large grid classes to it. To use the mixin, you'll need to have the extension installed or grab _variables.scss, _global.scss and _grid.scss from Github and throw them into a Foundation folder in your project directory.

<%= code_example ' ', :html %>

---

Building With Mixins

If you are keen on SCSS and use it for your Foundation projects, you have access to grid mixins that will let you layout the page without using presentational classes that you don't want. You can create your own set of classes or even create your own grid. Setting any of the options to 'false' will leave off those styles, giving you lots of control over your CSS output. Here's an example structure you might use with the grid mixin:

Basic Mixin Usage

<%= code_example ' /* Mixin options creating rows */ @include grid-row($behavior); /* The default value is false, which will bring in the default row styles */ $behavior: false /* If the element you are creating as a row is nested within another element */ /* that is also a row, you need to add the proper nesting styles */ $behavior: nest /* You can use this option to collapse the container row margins */ /* This comes in handy when working with forms inside the grid */ $behavior: collapse /* If you have a nested row and want it to be collapsed, you need to add this option */ $behavior: nest-collapse ', :css %> <%= code_example ' /* Mixin options creating columns, these must be nested inside or a row */ @include grid-column($columns, $last-column, $center, $offset, $push, $pull, $collapse, $float); /* The most commonly used option with a column */ /* This sets the width properties for the column, use a number to represent columns */ $columns: # /* Use this option if your columns do not add up to 12. */ /* We make the last column default to float:right to keep things aligned */ /* If you do not want this, set $last-column to true */ $last-column: false /* If you have a single column inside a row and want it centered, set this to true */ $center: false /* Control how many columns you offset by switching this into a number. */ $offset: false /* You can use source ordering with this mixin too, just set this to a number. */ $push: false /* You can use source ordering with this mixin too, just set this to a number. */ $pull: false /* If you have a collapsed row, you need to set the columns to collapse as well. */ $collapse: false /* By default, we include float: left. */ /* To help control this, we made it an option. Set this to false to not include those styles. */ $float: left ', :css %> <%= code_example ' #masthead { @include grid-row; @include panel; & > hgroup { @include grid-column(4); } & > section { @include grid-column(8); } }', :css %>

Title

Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

---

Default SCSS Variables

<%= code_example ' $row-width: emCalc(1000px) !default; $column-gutter: emCalc(30px) !default; $total-columns: 12 !default; ', :css %>

---

Get Advanced With Media Query Changes

We kept media queries out of the code for our grid mixins. This will enable you to include the mixins inside of whatever breakpoint you'd like, putting you in complete control. If you want to create 10 breakpoints and shift the layout around between each one, by all means. If you want to use only the default breakpoints, we've got variables for that.