Layout

A collection of utility classes to quickly and consistently create grid based layouts.

Layout — Grid Columns

Combine the Desktop lg-col-, Tablet md-col-, Mobile Landscape sm-col- and Mobile Portrait xs-col- grid classes below to define exactly how many columns you want at each breakpoint.

Desktop

Set the number of columns at Desktop size and down.

gridlg-col-1 — 1 column
grid — 2 column (default starting point of grid)
gridlg-col-3 — 3 column
gridLG-col-4 — 4 column
gridlg-col-5 — 5 column
gridlg-col-6 — 6 column

Tablet

Set the number of columns at Tablet size and down. If Desktop columns are defined, it will overwrite them.

gridmd-col-1 — 1 column
gridmd-col-2 — 2 column
gridmd-col-3 — 3 column
gridmd-col-4 — 4 column
gridmd-col-5 — 5 column
gridmd-col-6 — 6 column

Mobile Landscape

Set the number of columns at Mobile Landscape size and down. If Desktop and Tablet columns are defined, it will overwrite them.

gridsm-col-1 — 1 column
gridsm-col-2 — 2 column
gridsm-col-3 — 3 column
gridsm-col-4 — 4 column
gridsm-col-5 — 5 column
gridsm-col-6 — 6 column

Mobile Portrait

Set the number of columns at Mobile Portrait size. If Desktop, Tablet and Mobile Landscape columns are defined, it will overwrite them.

gridxs-col-1 — 1 column
gridxs-col-2 — 2 column
gridxs-col-3 — 3 column
gridxs-col-4 — 4 column
gridxs-col-5 — 5 column
gridxs-col-6 — 6 column

Grid Modifiers

Add these modifier classes to your grid to adjust gap and alignment.

Gaps

gridcc-gap-20 — 20px gap
gridcc-gap-40 — 40px gap
gridcc-gap-60 — 60px gap
gridcc-gap-80 — 80px gap

Alignment

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

gridcc-align-top — Align Items: Start

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

gridcc-align-center — Align Items: Center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

gridcc-align-bottom — Align Items: end