Grid
The layout is based on a maximum of 6 grid columns. You can specify the
structure of a grid by wrapping
<div class="column"></div> elements with
grid-* where * is a number from 1 to 6.
grid-1grid-2grid-3grid-4grid-5grid-6Responsive Grid
You can specify different grids based on a
screen size by using the
-at-<size> suffix.
For instance, if you wanted to have a 4 grid layout at large screen sizes a 3 grid layout at medium screen sizes, a 2 grid layout at small screen sizes, and everything else a grid size of 1, you would specify the following classes:
grid-1 gird-2-at-small grid-3-at-medium grid-4-at-large
column vs item
In the code you might see column and item used
as children of grid-* classes. Generally item is
used inside grid-flex and column inside
grid-*.
Grid Space
You can specify how large the white space should be between the grid
column / item children with grid-space.
Use grid-space-<size> class where <size>
is one of none, base, line, small,
medium, large—as described in the
sizes section.
For instance, grid-3 grid-space-medium produces the following:
Grid Row Spacing
You can set how large the white space should be between grid rows with the
grid-row-space-<size> class where <size>
is one of none, base, line, small,
medium, large—as described in the
sizes section.
For instance, grid-3 grid-row-space-small produces the following:
Grid Column Spacing
You can set how large the white space should be between grid columns with the
grid-col-space-<size> class where <size>
is one of none, base, line, small,
medium, large—as described in the
sizes section.
For instance, grid-3 grid-col-space-none produces the following:
Grid Gap
Just like any other element, you can add gap-<size>,
gap-vert-<size>, and gap-bottom-<size> to
the grid-* class— where<size>
is one of none, base, line, small,
medium, large—as described in the
sizes section. This adds a margin
of gap-<size> around the whole grid.
grid-3 gap-small
Responsive Grid Spaces
You can add the suffix -at-<size> to any of the above
classes to apply that class at a particular
screen size (or larger).
Grid Alignment
You can specify the right-to-left alignment with grid-align-<type>
where <type> is left, center,
right, justify.
Default State
grid-4
1. Quisque sit amet turpis quis turpis congue volutpat quis in magna. Aliquam vel rhoncus odio.
2. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Sed eleifend vehicula metus non gravida.
3. Aliquam vel rhoncus odio.
Left Align
grid-4 grid-align-left
1. Quisque sit amet turpis quis turpis congue volutpat quis in magna. Aliquam vel rhoncus odio.
2. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Sed eleifend vehicula metus non gravida.
3. Aliquam vel rhoncus odio.
Right Align
grid-4 grid-align-right
1. Quisque sit amet turpis quis turpis congue volutpat quis in magna. Aliquam vel rhoncus odio.
2. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Sed eleifend vehicula metus non gravida.
3. Aliquam vel rhoncus odio.
Center Align
grid-4 grid-align-center
1. Quisque sit amet turpis quis turpis congue volutpat quis in magna. Aliquam vel rhoncus odio.
2. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Sed eleifend vehicula metus non gravida.
3. Aliquam vel rhoncus odio.
Justify
grid-4 grid-align-justify
1. Quisque sit amet turpis quis turpis congue volutpat quis in magna. Aliquam vel rhoncus odio.
2. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Sed eleifend vehicula metus non gravida.
3. Aliquam vel rhoncus odio.
Grid Vertical Alignment
You can specify the vertical alignment with grid-valign-<type>
where <type> is top, middle,
bottom, justify.
Default State
grid-3
1. Quisque sit amet turpis quis turpis congue volutpat quis in magna. Aliquam vel rhoncus odio.
2. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Sed eleifend vehicula metus non gravida.
3. Aliquam vel rhoncus odio.
Top Align
grid-3 grid-valign-top
1. Quisque sit amet turpis quis turpis congue volutpat quis in magna. Aliquam vel rhoncus odio.
2. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Sed eleifend vehicula metus non gravida.
3. Aliquam vel rhoncus odio.
Middle Align
grid-3 grid-valign-middle
1. Quisque sit amet turpis quis turpis congue volutpat quis in magna. Aliquam vel rhoncus odio.
2. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Sed eleifend vehicula metus non gravida.
3. Aliquam vel rhoncus odio.
Bottom Align
grid-3 grid-valign-bottom
1. Quisque sit amet turpis quis turpis congue volutpat quis in magna. Aliquam vel rhoncus odio.
2. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Sed eleifend vehicula metus non gravida.
3. Aliquam vel rhoncus odio.
Justify Align
grid-3 grid-valign-justify
1. Quisque sit amet turpis quis turpis congue volutpat quis in magna. Aliquam vel rhoncus odio.
2. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Sed eleifend vehicula metus non gravida.
3. Aliquam vel rhoncus odio.
Responsive Grid Alignment
You can add the suffix -at-<size> to any of the above
classes to apply that class at a particular
screen size (or larger).
Grid Reverse
You can reverse the order of the original grid column / item
children with grid-reverse.
Default State
grid-3
1. Quisque sit amet turpis quis turpis congue volutpat quis in magna. Aliquam vel rhoncus odio.
2. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Sed eleifend vehicula metus non gravida.
3. Aliquam vel rhoncus odio.
Reverse State
grid-3 grid-reverse
1. Quisque sit amet turpis quis turpis congue volutpat quis in magna. Aliquam vel rhoncus odio.
2. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Sed eleifend vehicula metus non gravida.
3. Aliquam vel rhoncus odio.
Grid Row Equal Heights
You can make sure all columns in a row have equal heights with
grid-row-equal-heights.
grid-3 grid-row-equal-heights
1. Quisque sit amet turpis quis turpis congue volutpat quis in magna. Aliquam vel rhoncus odio.
2. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Sed eleifend vehicula metus non gravida.
3. Aliquam vel rhoncus odio.
Flexible Grid
A flexible grid re-sizes the child item's width based on the size of the content
inside each item. grid-flex will maximize the amount of space each
column can take up. This is useful for "floating" images and icons
alongside text.
grid-flexQuisque sit amet turpis quis turpis congue volutpat quis in magna. Suspendisse maximus massa dui, in iaculis ex vehicula in. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Aliquam vel rhoncus odio. Sed eleifend vehicula metus non gravida.
Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate.
no-shrink
If you have a content like the icon above that is reduces in width inside
a grid-flex item, you should apply the
no-shrink class to the item.
Without no-shrink
Quisque sit amet turpis quis turpis congue volutpat quis in magna. Suspendisse maximus massa dui, in iaculis ex vehicula in. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Aliquam vel rhoncus odio. Sed eleifend vehicula metus non gravida.
With no-shrink
Quisque sit amet turpis quis turpis congue volutpat quis in magna. Suspendisse maximus massa dui, in iaculis ex vehicula in. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Aliquam vel rhoncus odio. Sed eleifend vehicula metus non gravida.
Responsive Flexible Grid
You can trigger content to be flexible based on screen size by using the
-at-<size> suffix. For instance if you want content to
only be flexible at medium screen sizes and higher, you would
use:
grid-flex-at-medium
Flexible Grid Alignment
Flexible grids can be aligned vertically or horizontally just like other
grid-* elements.
Horizontal flexible grid alignments will only be visible if none of the
elements allowed to flex allow for the possibility of width: 100%.
Align Left
grid-flex flex-align-left
Align Right
grid-flex flex-align-right
Align Center
grid-flex flex-align-center
Align Justify
grid-flex flex-align-justify
Vertical Alignment (Flexible)
Default State
grid-flex
Quisque sit amet turpis quis turpis congue volutpat quis in magna. Suspendisse maximus massa dui, in iaculis ex vehicula in. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Aliquam vel rhoncus odio. Sed eleifend vehicula metus non gravida.
Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate.
Align Top
grid-flex flex-valign-top
Quisque sit amet turpis quis turpis congue volutpat quis in magna. Suspendisse maximus massa dui, in iaculis ex vehicula in. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Aliquam vel rhoncus odio. Sed eleifend vehicula metus non gravida.
Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate.
Align Middle
grid-flex flex-valign-middle
Quisque sit amet turpis quis turpis congue volutpat quis in magna. Suspendisse maximus massa dui, in iaculis ex vehicula in. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Aliquam vel rhoncus odio. Sed eleifend vehicula metus non gravida.
Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate.
Align Bottom
grid-flex flex-valign-bottom
Quisque sit amet turpis quis turpis congue volutpat quis in magna. Suspendisse maximus massa dui, in iaculis ex vehicula in. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Aliquam vel rhoncus odio. Sed eleifend vehicula metus non gravida.
Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate.
Align Justify
grid-flex flex-valign-justify
Quisque sit amet turpis quis turpis congue volutpat quis in magna. Suspendisse maximus massa dui, in iaculis ex vehicula in. Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate. Aliquam vel rhoncus odio. Sed eleifend vehicula metus non gravida.
Integer sollicitudin, tortor id pretium tristique, diam magna tempus velit, eget viverra leo elit id tellus. Morbi porta suscipit vulputate.