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
One of three columns
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 two columns
One of three columns
One of three columns
One of three columns
One of four columns
One of four columns
One of four 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-6
.spirit-col-8
.spirit-col-4
.spirit-col-3
.spirit-col-6
.spirit-col-3
.spirit-col-3
.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 top


Align top




Align center
Align center


Align center




Align bottom
Align bottom


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-6
.spirit-col-4
.spirit-col-4
.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