GitHub
This is a preview, you can find the current version here.
Last updated: 12/5/2025

Grid

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>
.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

Columns

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

Column classes

ClassOutputDefinitionResponsive?
.grid__1grid-template-columns: repeat(1, minmax(0, 1fr))Creates a grid layout with 1 column
.grid__2grid-template-columns: repeat(2, minmax(0, 2fr))Creates a grid layout with 2 columns
.grid__3grid-template-columns: repeat(3, minmax(0, 3fr))Creates a grid layout with 3 columns
.grid__4grid-template-columns: repeat(4, minmax(0, 4fr))Creates a grid layout with 4 columns
.grid__5grid-template-columns: repeat(5, minmax(0, 5fr))Creates a grid layout with 5 columns
.grid__6grid-template-columns: repeat(6, minmax(0, 6fr))Creates a grid layout with 6 columns
.grid__7grid-template-columns: repeat(7, minmax(0, 7fr))Creates a grid layout with 7 columns
.grid__8grid-template-columns: repeat(8, minmax(0, 8fr))Creates a grid layout with 8 columns
.grid__9grid-template-columns: repeat(9, minmax(0, 9fr))Creates a grid layout with 9 columns
.grid__10grid-template-columns: repeat(10, minmax(0, 10fr))Creates a grid layout with 10 columns
.grid__11grid-template-columns: repeat(11, minmax(0, 11fr))Creates a grid layout with 11 columns
.grid__12grid-template-columns: repeat(1, minmax(0, 12fr))Creates a grid layout with 12 columns
.grid__autogrid-template-columns: auto 1frCreates 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

ClassOutputDefinitionResponsive?
.grid--col-allgrid-column: 1 / -1Span all the columns
.grid--col1grid-column: span 1Span 1 column
.grid--col2grid-column: span 2Span 2 columns
.grid--col3grid-column: span 3Span 3 columns
.grid--col4grid-column: span 4Span 4 columns
.grid--col5grid-column: span 5Span 5 columns
.grid--col6grid-column: span 6Span 6 columns
.grid--col7grid-column: span 7Span 7 columns
.grid--col8grid-column: span 8Span 8 columns
.grid--col9grid-column: span 9Span 9 columns
.grid--col10grid-column: span 10Span 10 columns
.grid--col11grid-column: span 11Span 11 columns
.grid--col12grid-column: span 12Span 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

ClassOutputDefinitionResponsive?
.grid--row-allgrid-row: 1 / -1Span all the rows
.grid--row1grid-row: span 1Span 1 row
.grid--row2grid-row: span 2Span 2 rows
.grid--row3grid-row: span 3Span 3 rows
.grid--row4grid-row: span 4Span 4 rows
.grid--row5grid-row: span 5Span 5 rows
.grid--row6grid-row: span 6Span 6 rows
.grid--row7grid-row: span 7Span 7 rows
.grid--row8grid-row: span 8Span 8 rows
.grid--row9grid-row: span 9Span 9 rows
.grid--row10grid-row: span 10Span 10 rows
.grid--row11grid-row: span 11Span 11 rows
.grid--row12grid-row: span 12Span 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

ClassOutputDefinitionResponsive?
.g-af-rowgrid-auto-flow: rowItems are placed by filling each row in turn, adding new rows as necessary. The default.
.g-af-columngrid-auto-flow: columnItems are placed by filling each column in turn, adding new columns as necessary.
.g-af-densegrid-auto-flow: denseDense 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

ClassOutputDefinitionResponsive?
.grid--col-start1grid-column-start: 1Start at the 1st column
.grid--col-start2grid-column-start: 2Start at the 2nd column
.grid--col-start3grid-column-start: 3Start at the 3rd column
.grid--col-start4grid-column-start: 4Start at the 4th column
.grid--col-start5grid-column-start: 5Start at the 5th column
.grid--col-start6grid-column-start: 6Start at the 6th column
.grid--col-start7grid-column-start: 7Start at the 7th column
.grid--col-start8grid-column-start: 8Start at the 8th column
.grid--col-start9grid-column-start: 9Start at the 9th column
.grid--col-start10grid-column-start: 10Start at the 10th column
.grid--col-start11grid-column-start: 11Start at the 11th column
.grid--col-start12grid-column-start: 12Start at the 12th column
.grid--col-end2grid-column-end: 2End at the start of 2nd column
.grid--col-end3grid-column-end: 3End at the start of 3rd column
.grid--col-end4grid-column-end: 4End at the start of 4th column
.grid--col-end5grid-column-end: 5End at the start of 5th column
.grid--col-end6grid-column-end: 6End at the start of 6th column
.grid--col-end7grid-column-end: 7End at the start of 7th column
.grid--col-end8grid-column-end: 8End at the start of 8th column
.grid--col-end9grid-column-end: 9End at the start of 9th column
.grid--col-end10grid-column-end: 10End at the start of 10th column
.grid--col-end11grid-column-end: 11End at the start of 11th column
.grid--col-end12grid-column-end: 12End at the start of 12th column
.grid--col-end13grid-column-end: 13End 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

ClassOutputDefinitionResponsive?
.grid--row-start1grid-row-start: 1Start at the 1st row
.grid--row-start2grid-row-start: 2Start at the 2nd row
.grid--row-start3grid-row-start: 3Start at the 3rd row
.grid--row-start4grid-row-start: 4Start at the 4th row
.grid--row-start5grid-row-start: 5Start at the 5th row
.grid--row-start6grid-row-start: 6Start at the 6th row
.grid--row-start7grid-row-start: 7Start at the 7th row
.grid--row-start8grid-row-start: 8Start at the 8th row
.grid--row-start9grid-row-start: 9Start at the 9th row
.grid--row-start10grid-row-start: 10Start at the 10th row
.grid--row-start11grid-row-start: 11Start at the 11th row
.grid--row-start12grid-row-start: 12Start at the 12th row
.grid--row-end2grid-row-end: 2End at the start of 2nd row
.grid--row-end3grid-row-end: 3End at the start of 3rd row
.grid--row-end4grid-row-end: 4End at the start of 4th row
.grid--row-end5grid-row-end: 5End at the start of 5th row
.grid--row-end6grid-row-end: 6End at the start of 6th row
.grid--row-end7grid-row-end: 7End at the start of 7th row
.grid--row-end8grid-row-end: 8End at the start of 8th row
.grid--row-end9grid-row-end: 9End at the start of 9th row
.grid--row-end10grid-row-end: 10End at the start of 10th row
.grid--row-end11grid-row-end: 11End at the start of 11th row
.grid--row-end12grid-row-end: 12End at the start of 12th row
.grid--row-end13grid-row-end: 13End 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

ClassOutputDefinitionResponsive?
.ji-autojustify-items: autoUse the parent's justify value.
.ji-centerjustify-items: centerThe items are packed flush to each other toward the center of x axis.
.ji-startjustify-items: startThe items are packed flush to each other toward the left.
.ji-endjustify-items: endThe items are packed flush to each other toward the right.
.ji-stretchjustify-items: stretchItems stretch to fill the available space
.ji-unsetjustify-items: unsetRemoves any justification, effectively resetting the value
.js-autojustify-self: autoUse the parent's justify value.
.js-centerjustify-self: centerThe item is packed flush to the others toward the center of x axis.
.js-startjustify-self: startThe item is packed flush to the others toward the left.
.js-endjustify-self: endThe item is packed flush to the others toward the right.
.js-stretchjustify-self: stretchItem stretches to fill the available space
.js-unsetjustify-self: unsetRemoves any justification, effectively resetting the value
.ai-baselinealign-items: baselineAligns items along the baseline of a parent's cross axis.
.ai-centeralign-items: centerCenters child elements along the parent's cross axis.
.ai-endalign-items: endPlaces child elements at the end of the parent's cross axis.
.ai-startalign-items: startPlaces child elements at the start of the parent's cross axis.
.ai-stretchalign-items: stretchStretches child elements along the parent's cross axis.
.as-autoalign-self: auto;Auto re-aligns a child element along the parent's main axis.
.as-baselinealign-self: baseline;Re-aligns a child element along the baseline of the parent's main axis.
.as-centeralign-self: center;Centers a child element along the parent's main axis.
.as-endalign-self: end;Re-aligns a child element to the end of the parent's main axis.
.as-startalign-self: start;Re-aligns a child element to the start of the parent's main axis.
.as-stretchalign-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
Edit on GitHub
© 2025 Stack Exchange Inc. All rights reserved.