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.

        
            <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