Grid System

The grid system has six columns with gutter sizes of 1em.

It looks like you're viewing the framework documentation on a mobile device. On smaller devices, every column will default to 100% width. Switch to a desktop view to see how the grid looks on larger screens.

one-column

five-column

two-column

four-column

three-column

three-column

two-column

two-column

two-column

six-column

one-column

one-column

one-column

one-column

one-column

one-column

How to Use the Grid System

To use the grid system, first create the row in which your columns will be placed. To create a row, just add the class "row" to the parent tag. Then give a class of one-column or two-column or three-column etc... to the children of the row tag. You can mix tags together as long as they add up to 6. For example, you could use a class of one-column and then three-column and then two-column.

Example

one-column

three-column

two-column

HTML Example
    <div class="row">
     <div class="one-column">
        <p>one-column</p>
     </div>
     <div class="three-column">
        <p>three-column</p>
     </div>
     <div class="two-column">
        <p>two-column</p>
     </div>
    </div>