Grid System Example


Basic Grid Column Sizes

.c-col
.c-col
.c-col
.c-col
.c-col
.c-col
.c-col
.c-col
.c-col
.c-col
.c-col
.c-col
.c-col--2
.c-col--2
.c-col--2
.c-col--2
.c-col--2
.c-col--2
.c-col--3
.c-col--3
.c-col--3
.c-col--3
.c-col--4
.c-col--4
.c-col--4
.c-col--6
.c-col--6
.c-col--12

Combining Different Column Sizes

.c-col--3
.c-col--3
.c-col--6
.c-col--2
.c-col--8
.c-col--2
.c-col--5
.c-col--3
.c-col--4
.c-col
.c-col--11
.c-col--2
.c-col--10
.c-col--3
.c-col--9
.c-col--4
.c-col--8
.c-col--5
.c-col--7
.c-col--6
.c-col--6
.c-col--7
.c-col--5
.c-col--8
.c-col--4
.c-col--9
.c-col--3
.c-col--10
.c-col--2
.c-col--11
.c-col

Left Alignment

.c-col--5
.c-col--5
.c-col--3
.c-col--3
.c-col--4
.c-col--4
.c-col--2
.c-col--2
.c-col--6

Center Alignment

.c-col--5
.c-col--5
.c-col--3
.c-col--3
.c-col--4
.c-col--4
.c-col--2
.c-col--2
.c-col--6

Right Alignment

.c-col--5
.c-col--5
.c-col--3
.c-col--3
.c-col--4
.c-col--4
.c-col--2
.c-col--2
.c-col--6

Vertical Top Alignment

HEY LOOK AT US!
We're
at
the
top
of
the
grid
And
it
doesn't
even
matter
how
tall
we
are!

Vertical Center Alignment

Oh what's this?
Now
we're
in
the
vertical
center
of
the
grid?
What
madness
is
this?

Vertical Bottom Alignment

Well what do you know.
The
bottom
of
the
grid.
Can't
say
we
didn't
see
that
coming.