Columns

This column system is an alternative to the float-based column system and uses the flexbox model to create columns and grids.

The Container

The .flex-container is the basic layout unit for the flexbox grid. It will fill the full width of the viewport with a default of 1rem of padding on the right and left sides of the container.

The container is meant to be a generic wrapper to add enough padding to the content of your application so that it doesn’t bump up against the sides of the viewport. The container can be used as is without any other grid items inside, but it is required to wrap all other flex grid elements.

<div class="flex-container">
    <div class="flex-grid">
        <div class="flex-grid-item background-blue-primary text-align-center padding-2">
            <span class="text-white"><code>.flex-container</code></span>
        </div>
    </div>
</div>

Container Sizes

If you need to constrain the .flex-container to a fixed size there are four modifier classes that will set a max-width on the container.

<div class="flex-container-sm margin-bottom">
    <div class="flex-grid">
        <div class="flex-grid-item background-blue-primary text-align-center padding-2">
            <span class="text-white"><code>.flex-container-sm</code></span>
        </div>
    </div>
</div>
<div class="flex-container-md margin-bottom">
    <div class="flex-grid">
        <div class="flex-grid-item background-blue-primary text-align-center padding-2">
            <span class="text-white"><code>.flex-container-md</code></span>
        </div>
    </div>
</div>
<div class="flex-container-lg margin-bottom">
    <div class="flex-grid">
        <div class="flex-grid-item background-blue-primary text-align-center padding-2">
            <span class="text-white"><code>.flex-container-lg</code></span>
        </div>
    </div>
</div>
<div class="flex-container-xl">
    <div class="flex-grid">
        <div class="flex-grid-item background-blue-primary text-align-center padding-2">
            <span class="text-white"><code>.flex-container-xl</code></span>
        </div>
    </div>
</div>

Centering A Container

To center a container that was given a max-width using the modifier classes above, you can add the class .flex-container-center .

<div class="flex-container flex-container-sm flex-container-center">
    <div class="flex-grid">
        <div class="flex-grid-item background-blue-primary padding-2">
            <span class="text-white">.flex-container-center</span>
        </div>
    </div>
</div>

Automatic Columns

The flexbox grid evenly distributes children marked with the CSS class .flex-grid-item inside of a parent .flex-grid class. For example, a .flex-grid parent with three .flex-grid-item children, creates three equal width columns.

<div class="flex-container padding-top-3 padding-bottom-3 border">
    <div class="flex-grid">
        <div class="flex-grid-item">
            <div class="background-blue-primary text-white padding-2">Grid Item</div>
        </div>
        <div class="flex-grid-item">
            <div class="background-blue-primary text-white padding-2">Grid Item</div>
        </div>
        <div class="flex-grid-item">
            <div class="background-blue-primary text-white padding-2">Grid Item</div>
        </div>
    </div>
</div>

Responsive Automatic Columns

Automatic columns will be distributed equally across all screen sizes by default. You can use additional responsive classes to specify the screen size at which you would like your grid to become an auto grid.

In the example below, we’ve used the -lg suffix on the .flex-grid-item CSS class. This will make a grid that starts out collapsed into a single column on all screens up to large screens (1080px wide), at which point .flex-grid-item-lg will become evenly distributed columns.

This convention will work for any of the design system breakpoints: -sm, -md, -lg, -xl.

<div class="flex-container">
    <div class="flex-grid">
        <div class="flex-grid-item-lg margin-bottom-3">
            <div class="background-blue-primary text-white padding-2">Auto Grid Item</div>
        </div>
        <div class="flex-grid-item-lg margin-bottom-3">
            <div class='background-blue-primary text-white padding-2'>Auto Grid Item</div>
        </div>
        <div class="flex-grid-item-lg margin-bottom-3">
            <div class="background-blue-primary text-white padding-2">Auto Grid Item</div>
        </div>
        <div class="flex-grid-item-lg margin-bottom-3">
            <div class="background-blue-primary text-white padding-2">Auto Grid Item</div>
        </div>
        <div class="flex-grid-item-lg margin-bottom-3">
            <div class="background-blue-primary text-white padding-2">Auto Grid Item</div>
        </div>
    </div>
</div>

Flex Column Widths

You can set a specific number of columns you want grid items to span by including the number of columns in the responsive grid class. For example, adding the class .flex-grid-item-6-md would make a grid item span six columns at medium screens (740px) and larger.

When you explicitly set column widths, remember that the total number of columns should always equal 12.

<div class="flex-container flex-container-lg flex-container-center">
    <div class="flex-grid">
        <div class="flex-grid-item-4-md margin-bottom-3">
            <div class="background-blue-primary text-white padding-2">3 Columns Medium And Up</div>
        </div>
        <div class="flex-grid-item-4-md margin-bottom-3">
            <div class="background-blue-primary text-white padding-2">3 Columns Medium And Upp</div>
        </div>
        <div class="flex-grid-item-4-md margin-bottom-3">
            <div class="background-blue-primary text-white padding-2">3 Columns Medium And Up</div>
        </div>
    </div>
</div>

Mixing Column Widths With Auto Columns

It’s also possible to mix and match specified columns with .flex-grid-item auto columns. The grid items with specified columns will span the specified amount of columns and any auto grid items will fill the remaining space.

It’s important to note that the auto grid items will stack at whichever grid breakpoint you specify. In the example below we are using .flex-grid-item-6-md to set a width of six columns on medium screens and larger, so the auto grid items will inherit the same behavior.

<div class="flex-container">
    <div class="flex-grid">
        <div class="flex-grid-item margin-bottom-3">
            <div class="background-blue-primary text-white padding-2"><code>.flex-grid-item</code></div>
        </div>
        <div class="flex-grid-item-6-md margin-bottom-3">
            <div class='background-blue-primary text-white padding-2'><code>.flex-grid-item-6-md</code></div>
        </div>
        <div class="flex-grid-item margin-bottom-3">
            <div class="background-blue-primary text-white padding-2"><code>.flex-grid-item</code></div>
        </div>
    </div>
</div>

Push and Pull

When you need to change the visual order of the grid items, you can use .flex-grid-item-push-* and .flex-grid-item-pull-* utilities.

<div class="flex-container">
    <div class="flex-grid">
        <div class="flex-grid-item-4-md flex-grid-item-push-8-md margin-bottom-3">
            <div class="background-blue-primary text-white padding-2">
                I'm first in the source order
            </div>
        </div>
        <div class="flex-grid-item-8-md flex-grid-item-pull-4-md margin-bottom-3">
            <div class="background-blue-primary text-white padding-2">
                I'm second in the source order
            </div>
        </div>
    </div>
</div>

Right-align Last Item

You can right-align the last item in a .flex-grid by adding the .flex-grid-item-last utility to any grid item. This can be helpful when using set column widths that add up to less than 12 columns. Using the .flex-grid-item-last will push the last .flex-grid-item-* to the right, leaving the remaining columns as extra space.

<div class="flex-container">
    <div class="flex-grid">
        <div class="flex-grid-item-4-sm margin-bottom-3">
            <div class="background-blue-primary text-white padding-2">
                Grid Item Four Small
            </div>
        </div>
        <div class="flex-grid-item-7-sm flex-grid-item-last margin-bottom-3">
            <div class="background-blue-primary text-white padding-2">
                Grid Item 7 Seven Small. 1 Left Over
            </div>
        </div>
    </div>
</div>

Nesting Flex Grid Items

You can nest new .flex-grid blocks inside of .flex-grid-item-* elements if you need more control over your layout.

<div class="flex-container">
    <div class="flex-grid">
        <div class="flex-grid-item-7-md flex-grid-item-9-lg">
            <div class="background-blue-primary-30 padding-2 margin-bottom-3">
                Level one
                <div class="flex-grid">
                    <div class="flex-grid-item-7-md flex-grid-item-9-lg">
                        <div class="background-blue-primary text-white padding-2 margin-2">
                            Level Two
                        </div>
                    </div>
                    <div class="flex-grid-item-5-md flex-grid-item-3-lg">
                        <div class="background-blue-primary text-white padding-2 margin-2">Level Two</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex-grid-item-5-md flex-grid-item-3-lg">
            <div class="background-blue-primary-30 padding-2 margin-bottom-3">
                Level one
            </div>
        </div>
    </div>
</div>