The Grid


6 columns
6 columns
12/6/4 columns
12/6/8 columns

4 columns
Whatever's left!

4 columns
Whatever's left!
Whatever's left!

Shrink!
Expand!

One
Two
Three
Four
Five
Six

One
Two
Three
Four
Five
Six

Aligned to
the left
Aligned to
the right
Aligned to
the middle
Aligned to
the edges
Aligned to
the space around

I'm in the middle!
I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.

These columns align to the top.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, tempora. Impedit eius officia possimus laudantium? Molestiae eaque, sapiente atque doloremque placeat! In sint, fugiat saepe sunt dolore tempore amet cupiditate.

Align bottom
Align middle
Align top
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?

Removes gutter at large media query
Removes gutter at large media query

Offset 2 on large
4 columns

This column will come second on small, and first on medium and larger.
This column will come first on small, and second on medium and larger.

1 per row on small
2 per row on medium
3 per row on large