Grid

Atomic CSS grid classes allow you to quickly add native css grids to your container.

Looking for our old flex grid? Flex layouts have been moved and renamed now that CSS grid is here. Our .grid, and .grid--cell classes have been removed in favor of .d-flex and .flex--item.

If you need to continue using the old .grid, and .grid--cell classes, Stacks provides a shim for backwards compatability.

CSS Grids are the most powerful layout system available in CSS. It has two dimensions, meaning it can handle both columns and rows simultaneously, unlike flex layouts which can only do one at a time. Applying .d-grid to a container will lay out its children according to the CSS Grid layout spec. Adding atomic modifying classes will change the layout’s behavior. Applying classes to an individual .grid--item will change that cell’s behavior.

<div class="d-grid">
<div class="grid--item"></div>
</div>
.d-grid .grid__4 .g16
.sm:g-af-row
.grid--item
.grid--col-all
.grid--item
.grid--col1
.md:grid--col-all
.grid--row2
.grid--item
.grid--col3
.md:grid--col-all
.grid__2
.d-grid
.g16
.grid__2
.sm:g-af-row
.grid--item
.sm:grid--col-all
.grid--item
.sm:grid--col-all
.grid--item
.sm:grid--col-all
.grid--item
.sm:grid--col-all
.grid--item
.grid--col2
.grid--item
.grid--col1
.md:grid--col2
.grid--item
.grid--col-all
.grid--item
.md:grid--col2
.md:has-row-2
.grid--item
.md:grid--col2
.grid--item
.md:grid--col2
.grid--item
.md:grid--col-all

The most powerful aspect of CSS grids are its native gutters. To add space between columns and rows add one of the following classes to your grid container.

Class Output Definition Responsive?
.g0 gap: 0 Add no space between grid items
.g2 gap: 2px Space out grid items by 2px
.g4 gap: 4px Space out grid items by 4px
.g6 gap: 6px Space out grid items by 6px
.g8 gap: 8px Space out grid items by 8px
.g12 gap: 12px Space out grid items by 12px
.g16 gap: 16px Space out grid items by 16px
.g24 gap: 24px Space out grid items by 24px
.g32 gap: 32px Space out grid items by 32px
.g48 gap: 48px Space out grid items by 48px
.g64 gap: 64px Space out grid items by 64px
<div class="d-grid g0"></div>
<div class="d-grid g2"></div>
<div class="d-grid g4"></div>
<div class="d-grid g8"></div>
<div class="d-grid g12"></div>
<div class="d-grid g16"></div>
<div class="d-grid g24"></div>
<div class="d-grid g32"></div>
<div class="d-grid g48"></div>
<div class="d-grid g64"></div>
.g0
.g2
.g4
.g8
.g12
.g16
.g24
.g32
.g48
.g64

To define a discrete number of columns in your grid layout, you can add a grid__[x] modifying class.

Class Output Definition Responsive?
.grid__1 grid-template-columns: repeat(1, minmax(0, 1fr)) Creates a grid layout with 1 column
.grid__2 grid-template-columns: repeat(2, minmax(0, 2fr)) Creates a grid layout with 2 columns
.grid__3 grid-template-columns: repeat(3, minmax(0, 3fr)) Creates a grid layout with 3 columns
.grid__4 grid-template-columns: repeat(4, minmax(0, 4fr)) Creates a grid layout with 4 columns
.grid__5 grid-template-columns: repeat(5, minmax(0, 5fr)) Creates a grid layout with 5 columns
.grid__6 grid-template-columns: repeat(6, minmax(0, 6fr)) Creates a grid layout with 6 columns
.grid__7 grid-template-columns: repeat(7, minmax(0, 7fr)) Creates a grid layout with 7 columns
.grid__8 grid-template-columns: repeat(8, minmax(0, 8fr)) Creates a grid layout with 8 columns
.grid__9 grid-template-columns: repeat(9, minmax(0, 9fr)) Creates a grid layout with 9 columns
.grid__10 grid-template-columns: repeat(10, minmax(0, 10fr)) Creates a grid layout with 10 columns
.grid__11 grid-template-columns: repeat(11, minmax(0, 11fr)) Creates a grid layout with 11 columns
.grid__12 grid-template-columns: repeat(1, minmax(0, 12fr)) Creates a grid layout with 12 columns
<div class="d-grid grid__1"></div>
<div class="d-grid grid__2"></div>
<div class="d-grid grid__3"></div>
<div class="d-grid grid__4"></div>
<div class="d-grid grid__5"></div>
<div class="d-grid grid__6"></div>
<div class="d-grid grid__7"></div>
<div class="d-grid grid__8"></div>
<div class="d-grid grid__9"></div>
<div class="d-grid grid__10"></div>
<div class="d-grid grid__11"></div>
<div class="d-grid grid__12"></div>
1
1
2
1
2
3
1
2
3
4
1
2
3
4
5
1
2
3
4
5
6
1
2
3
4
5
6
7
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
11
1
2
3
4
5
6
7
8
9
10
11
12

You can apply grid--col[x] to your columns, and grid--row[x] to your rows to span a specific number of columns or rows.

Class Output Definition Responsive?
.grid--col-all grid-column: 1 / -1 Span all the columns
.grid--col1 grid-column: span 1 Span 1 column
.grid--col2 grid-column: span 2 Span 2 columns
.grid--col3 grid-column: span 3 Span 3 columns
.grid--col4 grid-column: span 4 Span 4 columns
.grid--col5 grid-column: span 5 Span 5 columns
.grid--col6 grid-column: span 6 Span 6 columns
.grid--col7 grid-column: span 7 Span 7 columns
.grid--col8 grid-column: span 8 Span 8 columns
.grid--col9 grid-column: span 9 Span 9 columns
.grid--col10 grid-column: span 10 Span 10 columns
.grid--col11 grid-column: span 11 Span 11 columns
.grid--col12 grid-column: span 12 Span 12 columns
<div class="d-grid grid__12">
<div class="grid--col-all"></div>
<div class="grid--col1"></div>
<div class="grid--col2"></div>
<div class="grid--col3"></div>
<div class="grid--col4"></div>
<div class="grid--col5"></div>
<div class="grid--col6"></div>
<div class="grid--col7"></div>
<div class="grid--col8"></div>
<div class="grid--col9"></div>
<div class="grid--col10"></div>
<div class="grid--col11"></div>
<div class="grid--col12"></div>
</div>
.grid--col-all
.grid--col1
.grid--col2
.grid--col3
.grid--col4
.grid--col5
.grid--col6
.grid--col7
.grid--col8
.grid--col9
.grid--col10
.grid--col11
.grid--col12
Class Output Definition Responsive?
.grid--row-all grid-row: 1 / -1 Span all the rows
.grid--row1 grid-row: span 1 Span 1 row
.grid--row2 grid-row: span 2 Span 2 rows
.grid--row3 grid-row: span 3 Span 3 rows
.grid--row4 grid-row: span 4 Span 4 rows
.grid--row5 grid-row: span 5 Span 5 rows
.grid--row6 grid-row: span 6 Span 6 rows
.grid--row7 grid-row: span 7 Span 7 rows
.grid--row8 grid-row: span 8 Span 8 rows
.grid--row9 grid-row: span 9 Span 9 rows
.grid--row10 grid-row: span 10 Span 10 rows
.grid--row11 grid-row: span 11 Span 11 rows
.grid--row12 grid-row: span 12 Span 12 rows
<div class="d-grid grid__4">
<div class="grid--col2 grid--row4"></div>
<div class="grid--col2"></div>
<div class="grid--col2"></div>
<div class="grid--col2"></div>
<div class="grid--col2"></div>
</div>
.grid--col2
.grid--row4
.grid--col2
.grid--col2
.grid--col2
.grid--col2

If you have grid items that you don’t explicitly place on the grid, the auto-placement algorithm kicks in to automatically place the items.

Class Output Definition Responsive?
.g-af-row grid-auto-flow: row Items are placed by filling each row in turn, adding new rows as necessary. The default.
.g-af-column grid-auto-flow: column Items are placed by filling each column in turn, adding new columns as necessary.
.g-af-dense grid-auto-flow: dense Dense packing algorithm attempts to fill in holes earlier in the grid, if smaller items come up later. This may cause items to appear out-of-order, when doing so would fill in holes left by larger items.
<div class="d-grid g-af-row"></div>
<div class="d-grid g-af-column"></div>
<div class="d-grid g-af-dense"></div>
.g-af-row
1
2
3
.g-af-column
1
2
3
4
5
6
7
8
9
10
11
12
.g-af-dense
1
2
3
4
5
6
7
8
9
10
11
12

If you’d like to offset a column or row and specify its start and end positioning classes, you can apply these atomic classes.

Class Output Definition Responsive?
.grid--col-start1 grid-column-start: 1 Start at the 1st column
.grid--col-start2 grid-column-start: 2 Start at the 2nd column
.grid--col-start3 grid-column-start: 3 Start at the 3rd column
.grid--col-start4 grid-column-start: 4 Start at the 4th column
.grid--col-start5 grid-column-start: 5 Start at the 5th column
.grid--col-start6 grid-column-start: 6 Start at the 6th column
.grid--col-start7 grid-column-start: 7 Start at the 7th column
.grid--col-start8 grid-column-start: 8 Start at the 8th column
.grid--col-start9 grid-column-start: 9 Start at the 9th column
.grid--col-start10 grid-column-start: 10 Start at the 10th column
.grid--col-start11 grid-column-start: 11 Start at the 11th column
.grid--col-start12 grid-column-start: 12 Start at the 12th column
.grid--col-end2 grid-column-end: 2 End at the start of 2nd column
.grid--col-end3 grid-column-end: 3 End at the start of 3rd column
.grid--col-end4 grid-column-end: 4 End at the start of 4th column
.grid--col-end5 grid-column-end: 5 End at the start of 5th column
.grid--col-end6 grid-column-end: 6 End at the start of 6th column
.grid--col-end7 grid-column-end: 7 End at the start of 7th column
.grid--col-end8 grid-column-end: 8 End at the start of 8th column
.grid--col-end9 grid-column-end: 9 End at the start of 9th column
.grid--col-end10 grid-column-end: 10 End at the start of 10th column
.grid--col-end11 grid-column-end: 11 End at the start of 11th column
.grid--col-end12 grid-column-end: 12 End at the start of 12th column
.grid--col-end13 grid-column-end: 13 End at the start of 13th column
<div class="d-grid grid__4">
<div class="grid--col-start1 grid--col-end4"></div>
<div class="grid--col-start2 grid--col-end4"></div>
<div class="grid--col2 grid--col-end5"></div>
</div>
.grid--col-start1 .grid--col-end4
.grid--col-start2 .grid--col-end4
.grid--col2 .grid--col-end5
Class Output Definition Responsive?
.grid--row-start1 grid-row-start: 1 Start at the 1st row
.grid--row-start2 grid-row-start: 2 Start at the 2nd row
.grid--row-start3 grid-row-start: 3 Start at the 3rd row
.grid--row-start4 grid-row-start: 4 Start at the 4th row
.grid--row-start5 grid-row-start: 5 Start at the 5th row
.grid--row-start6 grid-row-start: 6 Start at the 6th row
.grid--row-start7 grid-row-start: 7 Start at the 7th row
.grid--row-start8 grid-row-start: 8 Start at the 8th row
.grid--row-start9 grid-row-start: 9 Start at the 9th row
.grid--row-start10 grid-row-start: 10 Start at the 10th row
.grid--row-start11 grid-row-start: 11 Start at the 11th row
.grid--row-start12 grid-row-start: 12 Start at the 12th row
.grid--row-end2 grid-row-end: 2 End at the start of 2nd row
.grid--row-end3 grid-row-end: 3 End at the start of 3rd row
.grid--row-end4 grid-row-end: 4 End at the start of 4th row
.grid--row-end5 grid-row-end: 5 End at the start of 5th row
.grid--row-end6 grid-row-end: 6 End at the start of 6th row
.grid--row-end7 grid-row-end: 7 End at the start of 7th row
.grid--row-end8 grid-row-end: 8 End at the start of 8th row
.grid--row-end9 grid-row-end: 9 End at the start of 9th row
.grid--row-end10 grid-row-end: 10 End at the start of 10th row
.grid--row-end11 grid-row-end: 11 End at the start of 11th row
.grid--row-end12 grid-row-end: 12 End at the start of 12th row
.grid--row-end13 grid-row-end: 13 End at the start of 13th row
<div class="d-grid grid__4">
<div class="grid--col2 grid--row-start2 grid--row-end4"></div>
<div class="grid--col2"></div>
<div class="grid--col2"></div>
<div class="grid--col2"></div>
<div class="grid--col2"></div>
</div>
.grid--col2
.grid--row-start2
.grid--row-end4
.grid--col2
.grid--col2
.grid--col2
.grid--col2

On the grid container, you can apply align-items to the y axis and justify-items to the x axis. On individual items, you can apply align-self on the y axis, and justify-self on the x axis.

Class Output Definition Responsive?
.ji-auto justify-items: auto Use the parent’s justify value.
.ji-center justify-items: center The items are packed flush to each other toward the center of x axis.
.ji-start justify-items: start The items are packed flush to each other toward the left.
.ji-end justify-items: end The items are packed flush to each other toward the right.
.ji-stretch justify-items: stretch Items stretch to fill the available space
.ji-unset justify-items: unset Removes any justification, effectively resetting the value
.js-auto justify-self: auto Use the parent’s justify value.
.js-center justify-self: center The item is packed flush to the others toward the center of x axis.
.js-start justify-self: start The item is packed flush to the others toward the left.
.js-end justify-self: end The item is packed flush to the others toward the right.
.js-stretch justify-self: stretch Item stretches to fill the available space
.js-unset justify-self: unset Removes any justification, effectively resetting the value
.ai-baseline align-items: baseline Aligns items along the baseline of a parent’s cross axis.
.ai-center align-items: center Centers child elements along the parent’s cross axis.
.ai-end align-items: end Places child elements at the end of the parent’s cross axis.
.ai-start align-items: start Places child elements at the start of the parent’s cross axis.
.ai-stretch align-items: stretch Stretches child elements along the parent’s cross axis.
.as-auto align-self: auto; Auto re-aligns a child element along the parent’s main axis.
.as-baseline align-self: baseline; Re-aligns a child element along the baseline of the parent’s main axis.
.as-center align-self: center; Centers a child element along the parent’s main axis.
.as-end align-self: end; Re-aligns a child element to the end of the parent’s main axis.
.as-start align-self: start; Re-aligns a child element to the start of the parent’s main axis.
.as-stretch align-self: stretch; Stretches a child element along the parent’s main axis.
<div class="d-grid ji-center ai-center">
<div class="grid--item as-start"></div>
<div class="grid--item"></div>
<div class="grid--item js-end"></div>

</div>
Default
1
2
3
4
5
6
.ji-center .ai-center
1 .as-start
2
3 .as-stretch
4 .js-end
5
6