Grid System

Grid system uses a series of containers, rows, and columns to layout and align content. It's built with CSS grid and is fully responsive. Below is an example on how the grid system comes together.

The .l-row class initialize the system. There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., md-col-4 spans four). widths are set in percentages so you always have the same relative sizing.

DO NOT MODIFY this component. Instead, overwrite styles using the stylesheet of each page.

Column
Column
Column

Column
Column
Column

Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column
Column

        
            <div class="l-row">
                <div class="sm-col-12 md-col-4 lg-col-4">Column</div>
                <div class="sm-col-12 md-col-4 lg-col-4">Column</div>
                <div class="sm-col-12 md-col-4 lg-col-4">Column</div>
            </div>

                    

Grid Options

CSS Class Description
.col Auto width depending on the amount of columns
.sm-col- Query for small resolutions
.md-col- Query for medium resolutions (min-width: 40em)
.lg-col- Query for large resolutions (min-width: 64em)
.btn-group Used for group of actions