zurb-foundation-5

--- title: Grid --- <h3 class="subheader">Create powerful multi-device layouts quickly and easily with the default 12-column, nest-able Foundation grid. If you're familiar with grid systems, you'll feel right at home. If not, you'll learn quickly.</h3> *** <h3>Basic</h3> Start by adding an element with a class of `row`. This will create a horizontal block to contain vertical columns. Then add divs with a `column` class within that row. You can use `column` or `columns` - the only difference is grammar. Specify the widths of each column with the small-#, medium-#, and large-# classes. **Foundation is mobile-first**. Code for small screens first, and larger devices will inherit those styles. Customize for larger screens as necessary. <h4>HTML</h4> {{> examples_grid_basic}} <h4>Rendered HTML</h4> {{> examples_grid_rendered}} *** ### Small Grid Small grids expand to large screens easier than large grids cram into small screens. <h4>HTML</h4> {{> examples_grid_small}} <h4>Rendered HTML</h4> {{> examples_grid_small_rendered}} *** ### Medium Grid Medium sized screens will inherit styles from small, unless you specify a different layout, using the medium grid classes. {{> examples_grid_medium}} <h4>Rendered HTML</h4> {{> examples_grid_medium_rendered}} *** <h3>Advanced</h3> You can nest the grids indefinitely, though at a certain point it will get absurd. <h4>HTML</h4> {{> examples_grid_nested}} <h4>Rendered HTML</h4> {{> examples_grid_nested_rendered}} *** ### Offsets Move blocks up to 11 columns to the right by using classes like `.large-offset-1` and `.small-offset-3`. <h4>HTML</h4> {{> examples_grid_offsets}} <h4>Rendered HTML</h4> {{> examples_grid_offsets_rendered}} *** ### Incomplete Rows In order to work around browsers' different rounding behaviors, 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 a class of `end` in order to override that behavior. <h4>HTML</h4> {{> examples_grid_end}} <h4>Rendered HTML</h4> {{> examples_grid_end_rendered}} *** ### Centered Columns Center your columns by adding a class of `small-centered` to your `column`. Large will inherit small centering by default, but you can also center solely on large by applying a `large-centered` class. To uncenter on large screens use `large-uncentered`. <h4>HTML</h4> {{> examples_grid_centered}} <h4>Rendered HTML</h4> {{> examples_grid_centered_rendered}} *** ### Source Ordering Using these source ordering classes, you can shift columns around between our breakpoints. This means if you place sub-navigation below main content on small displays, you have the option to position the sub-navigation on either the left or right of the page for large displays. Prefix push/pull with the size of the device you want to apply the styles to. `medium-push-#`, `large-push-#` is the syntax you'll use. Use `large-reset-order` to reset pushed or pulled columns to their original position on large screens. <h4>HTML</h4> {{> examples_grid_source}} <h4>Rendered HTML</h4> {{> examples_grid_source_rendered}} *** ## Customize with Sass Customizing the grid is easy with the Sass variables provided in the `_settings.scss` file. <h4>SCSS</h4> {{> examples_grid_variables}} <h3>Basic</h3> You can use the `grid-row()` and `grid-column()` mixins to create your own rows and columns with semantic markup, like so: <div class="row"> <div class="large-6 columns"> <h4>SCSS</h4> {{#markdown}} ```scss .custom-row-class { @include grid-row(); .custom-column-class { @include grid-column(12); } } ``` {{/markdown}} </div> <div class="large-6 columns"> <h4>HTML</h4> {{> examples_grid_row_mixin}} </div> </div> <h3>Advanced</h3> You can further customize your grid columns using the provided options in the `grid-column()` mixin: ##### Row Mixin Options <h4>SCSS</h4> {{> examples_grid_row_options}} ##### Column Mixin Options <h4>SCSS</h4> {{> examples_grid_column_mixin}} *** ##### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file: <h4>SCSS</h4> {{#markdown}} ```scss @import "foundation/components/grid"; ``` {{/markdown}}