Grid

The grid consists of twelve fluid columns at each breakpoint.

1
1
1
1
1
1
1
1
1
1
1
1
        <div class="grid">
            <div class="grid__unit" g-xs="cols:1"></div>
            …
        </div>

Grid units can span 2, 3 or 4 columns.

6
6
4
4
4
3
3
3
3
        <div class="grid">
            <div class="grid__unit" g-xs="cols:6">6</div>
            <div class="grid__unit" g-xs="cols:6">6</div>
        </div>

Grid units can span a different number of columns at each breakpoint.

12 6 4 3
12 6 4 3
12 6 4 3
12 6 4 3 
        <div class="grid">
            <div class="grid__unit" g-xs="cols:12" g-sm="cols:6" g-md="cols:4" g-lg="cols:3"></div>
            <div class="grid__unit" g-xs="cols:12" g-sm="cols:6" g-md="cols:4" g-lg="cols:3"></div>
            <div class="grid__unit" g-xs="cols:12" g-sm="cols:6" g-md="cols:4" g-lg="cols:3"></div>
            <div class="grid__unit" g-xs="cols:12" g-sm="cols:6" g-md="cols:4" g-lg="cols:3"></div>
        </div>
(Flexbox only)

Grid units can be sized to take up no more room than their content, or sized to fill the remaining width of the grid.

2
min
max
3
        <div class="grid">
            <div class="grid__unit" g-xs="cols:2">2</div>
            <div class="grid__unit" g-xs="cols:min">min</div>
            <div class="grid__unit" g-xs="cols:max">max</div>
            <div class="grid__unit" g-xs="cols:3">3</div>
        </div>

Grid utilities

Visibility

Grid units can be hidden at any breakpoint.

visible on mobile
visible on tablet
visible on destop
            <div class="grid">
                <div class="grid__unit" g-sm="invisible">visible on mobile </div>
                <div class="grid__unit" g-xs="invisible" g-sm="visible" g-lg="invisible">visible on tablet</div>
                <div class="grid__unit" g-xs="invisible" g-lg="visible">visible on destop </div>
            </div>
(Flexbox only)

Ordering

Grid units can be re-ordered.

A
B
C
D
E
            <div class="grid">
                <div class="grid__unit" g-xs="cols:2 order:last">A</div>
                <div class="grid__unit" g-xs="cols:2">B</div>
                <div class="grid__unit" g-xs="cols:2">C</div>
                <div class="grid__unit" g-xs="cols:2">D</div>
                <div class="grid__unit" g-xs="cols:2 order:first">E</div>
            </div>

The grid units can be reversed.

A
B
C
D
E
            <div class="grid" g-xs="order:reverse">
                <div class="grid__unit" g-xs="cols:2">A</div>
                <div class="grid__unit" g-xs="cols:2">B</div>
                <div class="grid__unit" g-xs="cols:2">C</div>
                <div class="grid__unit" g-xs="cols:2">D</div>
                <div class="grid__unit" g-xs="cols:2">E</div>
            </div>

Alignment

Horizontal.

align
left
align
center
align
right

align
just
ified

(Behaves the same as halign:justify on Inline-Block)
align
justify
center
            <div class="grid" g-xs="halign:left">
                ...
            </div>
            <div class="grid" g-xs="halign:center">
                ...
            </div>
            <div class="grid" g-xs="halign:right">
                ...
            </div>
            <div class="grid" g-xs="halign:justify">
                ...
            </div>
            <div class="grid" g-xs="halign:justify-center">
                ...
            </div>
(Flexbox only)

Vertical.

align
top
align
middle
align
bottom

align
stretch
            <div class="grid" g-xs="valign:top">
                ...
            </div>
            <div class="grid" g-xs="valign:middle">
                ...
            </div>
            <div class="grid" g-xs="valign:bottom">
                ...
            </div>
            <div class="grid" g-xs="valign:stretch">
                ...
            </div>

Generic utilities

Visibility

Other elements can be hidden or displayed.

mobile tablet desktop 
            <div class="grid">
                <div class="grid__unit">
                    <span g-xs="display:inline" g-md="display:none">mobile</span>
                    <span g-xs="display:none" g-md="display:inline" g-lg="display:none">tablet</span>
                    <span g-xs="display:none" g-lg="display:inline">desktop</span>
                    </div>
            </div>

Text

Text can be aligned differently at each breakpoint.

left center right 
            <div class="grid__unit" g-xs="text:left" g-md="text:center" g-lg="text:right">
                ...
            </div>

Gotch-yas