Grid

A mobile-first flexbox grid in 12 columns, loosely based on Bootstrap 4. Usually found within an outer container that determines the grid’s maximum width.

Certain components use their own grid. See card grid for details.

Example

One of three columns

Column Sizing

Auto-width Columns (default)

By default, columns distribute available space proportionally: two columns divide the space in half, three columns divide it into thirds, and so forth.

One of two columns

One of three columns

One of four columns

Code Copied

Copy Code

<div class="spirit-container">
    <div class="spirit-container__inner">
        <div class="spirit-row">
            <div class="spirit-col"> One of two columns </div>
            <div class="spirit-col"> One of two columns </div>
        </div>
        <div class="spirit-row">
            <div class="spirit-col"> One of three columns </div>
            <div class="spirit-col"> One of three columns </div>
            <div class="spirit-col"> One of three columns </div>
        </div>
        <div class="spirit-row">
            <div class="spirit-col"> One of four columns </div>
            <div class="spirit-col"> One of four columns </div>
            <div class="spirit-col"> One of four columns </div>
            <div class="spirit-col"> One of four columns </div>
        </div>
    </div>
</div>

Ratio Columns

Columns can be configured within a 12-column grid. Use ratio columns to create more specific layouts.

.spirit-col-6

.spirit-col-8

.spirit-col-4

.spirit-col-3

.spirit-col-6

.spirit-col-3

.spirit-col-6

Code Copied

Copy Code

<div class="spirit-container">
    <div class="spirit-container__inner">
        <div class="spirit-row">
            <div class="spirit-col-6"> .spirit-col-6 </div>
            <div class="spirit-col-6"> .spirit-col-6 </div>
        </div>
        <div class="spirit-row">
            <div class="spirit-col-8"> .spirit-col-8 </div>
            <div class="spirit-col-4"> .spirit-col-4 </div>
        </div>
        <div class="spirit-row">
            <div class="spirit-col-3"> .spirit-col-3 </div>
            <div class="spirit-col-6"> .spirit-col-6 </div>
            <div class="spirit-col-3"> .spirit-col-3 </div>
        </div>
        <div class="spirit-row">
            <div class="spirit-col-3"> .spirit-col-3 </div>
            <div class="spirit-col-3"> .spirit-col-3 </div>
            <div class="spirit-col-6"> .spirit-col-6 </div>
        </div>
    </div>
</div>

Responsiveness

Stack to column

Spirit grid starts out as a stack of inert full-width blocks, called cells.


Working mobile-first on the smallest viewports, the grid’s cells appear as full-width containers in a stack.	Cells can be configured to lay out in columns all the time or just at specific breakpoints.

Responsive column layouts

Independently configure when each cell should lay out as a column. Cells are full-width by default. Column definitions always apply from the specified breakpoint and larger.

	Extra Small < 375px	Small ≥ 375px	Medium ≥ 768px	Large ≥ 1024px	Extra Large ≥ 1248px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.spirit-col-`	`.spirit-col-sm-`	`.spirit-col-md-`	`.spirit-col-lg-`	`.spirit-col-xl-`
Number of Columns	12
Gutter Width	Default < 1080px `$spirit-space-generic-2-x`			$spirit-breakpoint-grid ≥ 1080px `$spirit-space-generic-4-x`

A single cell can have several definitions that apply at different breakpoints, changing its behavior and its relationship with other cells on the same row.

The following example appears as a row of four cells on large screens, a row of three cells with one left over on medium screens, and two rows of two cells on small screens.

Cell 1

Cell 2

Cell 3

Cell 4

Code Copied

Copy Code

<div class="spirit-container">
    <div class="spirit-container__inner">
        <div class="spirit-row">
            <div class="spirit-col-sm-6 spirit-col-md-4 spirit-col-lg-3"> Cell 1 </div>
            <div class="spirit-col-sm-6 spirit-col-md-4 spirit-col-lg-3"> Cell 2 </div>
            <div class="spirit-col-sm-6 spirit-col-md-4 spirit-col-lg-3"> Cell 3 </div>
            <div class="spirit-col-sm-6 spirit-col-md-4 spirit-col-lg-3"> Cell 4 </div>
        </div>
    </div>
</div>

Scaled padding

By default, all cells have left/right padding which creates a gutter between columns. This 8px padding adjusts to 16px at the large breakpoint.

Vertical Alignment

By default, cells align top and fill their row vertically. Optionally, whole rows can be configured to align their cells top (default), center, or bottom.

Align top

Align center

Align bottom

Code Copied

Copy Code

<div class="spirit-container">
    <div class="spirit-container__inner">
        <div class="spirit-row spirit-align-items-start">
            <div class="spirit-col"> Align top </div>
            <div class="spirit-col"> Align top <br>
                <br>
                <br>
            </div>
            <div class="spirit-col"> Align top <br>
                <br>
                <br>
                <br>
                <br>
            </div>
        </div>
        <div class="spirit-row spirit-align-items-center">
            <div class="spirit-col"> Align center </div>
            <div class="spirit-col"> Align center <br>
                <br>
                <br>
            </div>
            <div class="spirit-col"> Align center <br>
                <br>
                <br>
                <br>
                <br>
            </div>
        </div>
        <div class="spirit-row spirit-align-items-end">
            <div class="spirit-col"> Align bottom </div>
            <div class="spirit-col"> Align bottom <br>
                <br>
                <br>
            </div>
            <div class="spirit-col"> Align bottom <br>
                <br>
                <br>
                <br>
                <br>
            </div>
        </div>
    </div>
</div>

Alternately, individual cells can be vertically aligned top, center, or bottom within their row.

Align top

Align center

Align bottom

Code Copied

Copy Code

<div class="spirit-container">
    <div class="spirit-container__inner">
        <div class="spirit-row">
            <div class="spirit-col spirit-align-self-start"> Align top <br>
                <br>
                <br>
            </div>
            <div class="spirit-col spirit-align-self-center"> Align center </div>
            <div class="spirit-col spirit-align-self-end"> Align bottom <br>
            </div>
        </div>
    </div>
</div>

Advanced Layout Options

Offset Columns

Push a cell to the left with an offset, leaving a blank space. Offsets follow the same measurements as columns, using the same responsive helper classes.

Cell A

Cell B, Offset 4

Cell C, Offset 3

Cell D, Offset 3

Code Copied

Copy Code

<div class="spirit-container">
    <div class="spirit-container__inner">
        <div class="spirit-row">
            <div class="spirit-col-md-4"> Cell A </div>
            <div class="spirit-col-md-4 spirit-offset-md-4"> Cell B, Offset 4 </div>
        </div>
        <div class="spirit-row">
            <div class="spirit-col-md-3 spirit-offset-md-3"> Cell C, Offset 3 </div>
            <div class="spirit-col-md-3 spirit-offset-md-3"> Cell D, Offset 3 </div>
        </div>
    </div>
</div>

No Gutters

By default, grid cells have padding, which creates visible gutters between cells in a row. Use spirit-row--no-gutters to remove the default gutters for an edge-to-edge cell.

Cell A

Cell B

Cell C

Code Copied

Copy Code

<div class="spirit-container">
    <div class="spirit-container__inner">
        <div class="spirit-row spirit-row--no-gutters">
            <div class="spirit-col-3"> Cell A </div>
            <div class="spirit-col-6"> Cell B </div>
            <div class="spirit-col-3"> Cell C </div>
        </div>
    </div>
</div>

Nesting

Nest a grid inside the cell of another grid. The nested grid fills the width of the cell and subdivides its horizontal space proportionally. Note: this should only occur at the largest breakpoint.

.spirit-col-6

.spirit-col-4

Code Copied

Copy Code

<div class="spirit-container">
    <div class="spirit-container__inner">
        <div class="spirit-row">
            <div class="spirit-col-6"> .spirit-col-6 </div>
            <div class="spirit-col-6"> .spirit-col-6 <div class="spirit-row">
                    <div class="spirit-col-4"> .spirit-col-4 </div>
                    <div class="spirit-col-4"> .spirit-col-4 </div>
                    <div class="spirit-col-4"> .spirit-col-4 </div>
                </div>
            </div>
        </div>
    </div>
</div>

Code Reference

Class	Applies to	Outcome
`.spirit-row--no-gutters`	`.spirit-row`	Removes gutters in between cells in a row
`.spirit-align-items-start`	`.spirit-row`	Top aligns all cells in a row
`.spirit-align-items-center`	`.spirit-row`	Vertically centers all cells in a row
`.spirit-align-items-end`	`.spirit-row`	Bottom aligns all cells in a row
`.spirit-align-self-start`	`.spirit-col`	Top aligns an individual cell within a row
`.spirit-align-self-center`	`.spirit-col`	Vertically centers an individual cell within a row
`.spirit-align-self-end`	`.spirit-col`	Bottom aligns an individual cell within a row