Flexbox Grid

A grid system based on the flex display property.

Responsive

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at hand, lap, desk & wall viewport widths.

<div class="row">
    <div class="column-12-hand
                column-8-lap
                column-6-desk
                column-4-wall">
        <div class="box">Responsive</div>
    </div>
</div>

Fluid

Percent based widths allow fluid resizing of columns and rows.

.column-6-hand {
  flex-basis: 50%;
}

Simple Syntax

All you need to remember is row, column, content.

<div class="row">
    <div class="column-12-hand">
        <div class="box">12</div>
    </div>
</div>

Offsets

Offset a column

<div class="row">
    <div class="offset-3-hand column-9-hand">
        <div class="box">offset</div>
    </div>
</div>

Auto Width

Add any number of auto sizing columns to a row. Let the grid figure it out.

<div class="row">
    <div class="column-auto-hand">
        <div class="box">auto</div>
    </div>
</div>

Nested Grids

Nest grids inside grids inside grids.

<div class="row">
    <div class="column-auto-hand">
        <div class="box">auto</div>
            <div class="row">
                <div class="column-auto-hand">
                    <div class="box">auto</div>
                </div>
            </div>
        </div>
    </div>
</div>

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column

.start-*

*default alignment
<div class="row start-hand">
    <div class="column-6-hand">
        <div class="box">
            start
        </div>
    </div>
</div>

.center-*

<div class="row center-hand">
    <div class="column-6-hand">
        <div class="box">
            start
        </div>
    </div>
</div>

.end-*

<div class="row end-hand">
    <div class="column-6-hand">
        <div class="box">
            end
        </div>
    </div>
</div>

Here is an example of using the modifiers in conjunction to acheive different alignment at different viewport sizes.

*Resize the browser window to see the alignment change.
<div class="row center-hand end-lap start-wall">
    <div class="column-6-hand">
        <div class="box">
            All together now
        </div>
    </div>
</div>

.top-*

*default alignment
<div class="row top-hand">
    <div class="column-6-hand">
        <div class="box">
            top
        </div>
    </div>
</div>

.middle-*

<div class="row middle-hand">
    <div class="column-6-hand">
        <div class="box">
            center
        </div>
    </div>
</div>

.bottom-*

<div class="row bottom-hand">
    <div class="column-6-hand">
        <div class="box">
            bottom
        </div>
    </div>
</div>

Distribution

Add classes to distribute the contents of a row or column.

.around-*

<div class="row around-hand">
    <div class="column-2-hand">
        <div class="box">
            around
        </div>
    </div>
    <div class="column-2-hand">
        <div class="box">
            around
        </div>
    </div>
    <div class="column-2-hand">
        <div class="box">
            around
        </div>
    </div>
</div>

.between-*

<div class="row between-hand">
    <div class="column-2-hand">
        <div class="box">
            between
        </div>
    </div>
    <div class="column-2-hand">
        <div class="box">
            between
        </div>
    </div>
    <div class="column-2-hand">
        <div class="box">
            between
        </div>
    </div>
</div>

Reordering

Add classes to reorder columns.

.first-*

1
2
3
4
5
6
<div class="row">
    <div class="column-2-hand">
        <div class="box">
            1
        </div>
    </div>
    <div class="column-2-hand">
        <div class="box">
            2
        </div>
    </div>
    <div class="column-2-hand first-hand">
        <div class="box">
            3
        </div>
    </div>
</div>

.last-*

1
2
3
4
5
6
<div class="row">
    <div class="column-2-hand last-hand">
        <div class="box">
            1
        </div>
    </div>
    <div class="column-2-hand">
        <div class="box">
            2
        </div>
    </div>
    <div class="column-2-hand">
        <div class="box">
            3
        </div>
    </div>
</div>

Reversing

.reverse

1
2
3
4
5
6
<div class="row reverse">
    <div class="column-2-hand">
        <div class="box">
            1
        </div>
    </div>
    <div class="column-2-hand">
        <div class="box">
            2
        </div>
    </div>
    <div class="column-2-hand">
        <div class="box">
            3
        </div>
    </div>
</div>