Grid
Atomic CSS grid classes allow you to quickly add native css grids to your container.
Overview
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.
Examples
<div class="d-grid">
<div class="grid--item">…</div>
</div>.grid--item
.grid--col-all
.grid--item
.grid--col1
.grid--row2
.grid--item
.grid--col3
.grid__2
.grid--item
.grid--item
.grid--item
.grid--item
.grid--item
.grid--col2
.grid--item
.grid--col1
.grid--item
.grid--col-all
Columns
To define a discrete number of columns in your grid layout, you can add a grid__[x] modifying class.
Column classes
| 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 | |
.grid__auto | grid-template-columns: auto 1fr | Creates a grid layout with auto-sized columns based on their content |
Columns examples
<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>
<div class="d-grid grid__auto">…</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
1
2
3
4
Column and row spans
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.
Column spanning classes
| 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 |
Column examples
<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
Row classes
| 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 |
Row example
<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
Autoflow
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.
Autoflow classes
| 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. |
Autoflow examples
<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
Start and end
If you’d like to offset a column or row and specify its start and end positioning classes, you can apply these atomic classes.
Column start and end 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 |
Column start and end examples
<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
Row start and end classes
| 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 |
Row start and end examples
<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
Alignment
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.
Alignment classes
| 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. |
Alignment examples
<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