Grids

CSS Grid is 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.

Overview

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 individual grid items will change that cell's behavior.

Basic Grid Example

Grid item 1
Grid item 2
Grid item 3
Grid item 4
Grid item 5
Grid item 6
<div class="d-grid grid__3 g4">
  <div class="bg-blue fc-white p3 ta-center">Grid item 1</div>
  <div class="bg-green fc-white p3 ta-center">Grid item 2</div>
  <div class="bg-purple fc-white p3 ta-center">Grid item 3</div>
  <div class="bg-orange fc-white p3 ta-center">Grid item 4</div>
  <div class="bg-red fc-white p3 ta-center">Grid item 5</div>
  <div class="bg-teal fc-white p3 ta-center">Grid item 6</div>
</div>

Columns

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

Class CSS Definition Responsive?
.grid__1 grid-template-columns: repeat(1, minmax(0, 1fr)); Creates a grid layout with 1 column Y
.grid__2 grid-template-columns: repeat(2, minmax(0, 1fr)); Creates a grid layout with 2 columns Y
.grid__3 grid-template-columns: repeat(3, minmax(0, 1fr)); Creates a grid layout with 3 columns Y
.grid__4 grid-template-columns: repeat(4, minmax(0, 1fr)); Creates a grid layout with 4 columns Y
.grid__5 grid-template-columns: repeat(5, minmax(0, 1fr)); Creates a grid layout with 5 columns Y
.grid__6 grid-template-columns: repeat(6, minmax(0, 1fr)); Creates a grid layout with 6 columns Y
.grid__7 grid-template-columns: repeat(7, minmax(0, 1fr)); Creates a grid layout with 7 columns Y
.grid__8 grid-template-columns: repeat(8, minmax(0, 1fr)); Creates a grid layout with 8 columns Y
.grid__9 grid-template-columns: repeat(9, minmax(0, 1fr)); Creates a grid layout with 9 columns Y
.grid__10 grid-template-columns: repeat(10, minmax(0, 1fr)); Creates a grid layout with 10 columns Y
.grid__11 grid-template-columns: repeat(11, minmax(0, 1fr)); Creates a grid layout with 11 columns Y
.grid__12 grid-template-columns: repeat(12, minmax(0, 1fr)); Creates a grid layout with 12 columns Y

Column Examples

.grid__1

1

.grid__2

1
2

.grid__3

1
2
3

.grid__4

1
2
3
4

.grid__6

1
2
3
4
5
6

.grid__12

1
2
3
4
5
6
7
8
9
10
11
12

Rows

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

Class CSS Definition Responsive?
.grid__r1 grid-template-rows: repeat(1, minmax(0, 1fr)); Creates a grid layout with 1 row Y
.grid__r2 grid-template-rows: repeat(2, minmax(0, 1fr)); Creates a grid layout with 2 rows Y
.grid__r3 grid-template-rows: repeat(3, minmax(0, 1fr)); Creates a grid layout with 3 rows Y
.grid__r4 grid-template-rows: repeat(4, minmax(0, 1fr)); Creates a grid layout with 4 rows Y
.grid__r5 grid-template-rows: repeat(5, minmax(0, 1fr)); Creates a grid layout with 5 rows Y
.grid__r6 grid-template-rows: repeat(6, minmax(0, 1fr)); Creates a grid layout with 6 rows Y
.grid__r7 grid-template-rows: repeat(7, minmax(0, 1fr)); Creates a grid layout with 7 rows Y
.grid__r8 grid-template-rows: repeat(8, minmax(0, 1fr)); Creates a grid layout with 8 rows Y
.grid__r9 grid-template-rows: repeat(9, minmax(0, 1fr)); Creates a grid layout with 9 rows Y
.grid__r10 grid-template-rows: repeat(10, minmax(0, 1fr)); Creates a grid layout with 10 rows Y
.grid__r11 grid-template-rows: repeat(11, minmax(0, 1fr)); Creates a grid layout with 11 rows Y
.grid__r12 grid-template-rows: repeat(12, minmax(0, 1fr)); Creates a grid layout with 12 rows Y

Row Examples

.grid__r2

1
2
3
4

.grid__r3

1
2
3
4
5
6

.grid__r4

1
2
3
4
5
6
7
8

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 CSS Definition Responsive?
.grid--col-all grid-column: 1 / -1; Span all the columns Y
.grid--col1 grid-column: span 1; Span 1 column Y
.grid--col2 grid-column: span 2; Span 2 columns Y
.grid--col3 grid-column: span 3; Span 3 columns Y
.grid--col4 grid-column: span 4; Span 4 columns Y
.grid--col5 grid-column: span 5; Span 5 columns Y
.grid--col6 grid-column: span 6; Span 6 columns Y
.grid--col7 grid-column: span 7; Span 7 columns Y
.grid--col8 grid-column: span 8; Span 8 columns Y
.grid--col9 grid-column: span 9; Span 9 columns Y
.grid--col10 grid-column: span 10; Span 10 columns Y
.grid--col11 grid-column: span 11; Span 11 columns Y
.grid--col12 grid-column: span 12; Span 12 columns Y

Row Spanning Classes

Class CSS Definition Responsive?
.grid--row-all grid-row: 1 / -1; Span all the rows Y
.grid--row1 grid-row: span 1; Span 1 row Y
.grid--row2 grid-row: span 2; Span 2 rows Y
.grid--row3 grid-row: span 3; Span 3 rows Y
.grid--row4 grid-row: span 4; Span 4 rows Y
.grid--row5 grid-row: span 5; Span 5 rows Y
.grid--row6 grid-row: span 6; Span 6 rows Y
.grid--row7 grid-row: span 7; Span 7 rows Y
.grid--row8 grid-row: span 8; Span 8 rows Y
.grid--row9 grid-row: span 9; Span 9 rows Y
.grid--row10 grid-row: span 10; Span 10 rows Y
.grid--row11 grid-row: span 11; Span 11 rows Y
.grid--row12 grid-row: span 12; Span 12 rows Y

Span Examples

Column spans

2 cols
1 col
1 col
1 col
3 cols

Row spans

2 rows
1 row
1 row
1 row
1 row
1 row
1 row
1 row

Combined spans

2×2
1×1
1×1
1×1
1×1
1×1
1×1
1×1

Auto Flow

Control how grid items are automatically placed in the grid using auto flow classes.

Class CSS Definition Responsive?
.g-af-dense grid-auto-flow: dense; Fill holes in the grid Y
.g-af-row grid-auto-flow: row; Fill grid row by row (default) Y
.g-af-column grid-auto-flow: column; Fill grid column by column Y

Auto Flow Examples

.g-af-row (default)

1
2 (spans 2)
3
4

.g-af-column

1
2 (spans 2)
3
4

.g-af-dense

1
2 (spans 2)
3
4

Start and End

Control the exact positioning of grid items using start and end classes.

Column Start and End Classes

Class CSS Definition Responsive?
.grid--col-start1 grid-column-start: 1; Start at the 1st column Y
.grid--col-start2 grid-column-start: 2; Start at the 2nd column Y
.grid--col-start3 grid-column-start: 3; Start at the 3rd column Y
.grid--col-start4 grid-column-start: 4; Start at the 4th column Y
.grid--col-start5 grid-column-start: 5; Start at the 5th column Y
.grid--col-start6 grid-column-start: 6; Start at the 6th column Y
.grid--col-start7 grid-column-start: 7; Start at the 7th column Y
.grid--col-start8 grid-column-start: 8; Start at the 8th column Y
.grid--col-start9 grid-column-start: 9; Start at the 9th column Y
.grid--col-start10 grid-column-start: 10; Start at the 10th column Y
.grid--col-start11 grid-column-start: 11; Start at the 11th column Y
.grid--col-start12 grid-column-start: 12; Start at the 12th column Y

Column End Classes

Class CSS Definition Responsive?
.grid--col-end2 grid-column-end: 2; End at the start of 2nd column Y
.grid--col-end3 grid-column-end: 3; End at the start of 3rd column Y
.grid--col-end4 grid-column-end: 4; End at the start of 4th column Y
.grid--col-end5 grid-column-end: 5; End at the start of 5th column Y
.grid--col-end6 grid-column-end: 6; End at the start of 6th column Y
.grid--col-end7 grid-column-end: 7; End at the start of 7th column Y
.grid--col-end8 grid-column-end: 8; End at the start of 8th column Y
.grid--col-end9 grid-column-end: 9; End at the start of 9th column Y
.grid--col-end10 grid-column-end: 10; End at the start of 10th column Y
.grid--col-end11 grid-column-end: 11; End at the start of 11th column Y
.grid--col-end12 grid-column-end: 12; End at the start of 12th column Y
.grid--col-end13 grid-column-end: 13; End at the start of 13th column Y

Row Start and End Classes

Class CSS Definition Responsive?
.grid--row-start1 grid-row-start: 1; Start at the 1st row Y
.grid--row-start2 grid-row-start: 2; Start at the 2nd row Y
.grid--row-start3 grid-row-start: 3; Start at the 3rd row Y
.grid--row-start4 grid-row-start: 4; Start at the 4th row Y
.grid--row-start5 grid-row-start: 5; Start at the 5th row Y
.grid--row-start6 grid-row-start: 6; Start at the 6th row Y
.grid--row-start7 grid-row-start: 7; Start at the 7th row Y
.grid--row-start8 grid-row-start: 8; Start at the 8th row Y
.grid--row-start9 grid-row-start: 9; Start at the 9th row Y
.grid--row-start10 grid-row-start: 10; Start at the 10th row Y
.grid--row-start11 grid-row-start: 11; Start at the 11th row Y
.grid--row-start12 grid-row-start: 12; Start at the 12th row Y

Row End Classes

Class CSS Definition Responsive?
.grid--row-end2 grid-row-end: 2; End at the start of 2nd row Y
.grid--row-end3 grid-row-end: 3; End at the start of 3rd row Y
.grid--row-end4 grid-row-end: 4; End at the start of 4th row Y
.grid--row-end5 grid-row-end: 5; End at the start of 5th row Y
.grid--row-end6 grid-row-end: 6; End at the start of 6th row Y
.grid--row-end7 grid-row-end: 7; End at the start of 7th row Y
.grid--row-end8 grid-row-end: 8; End at the start of 8th row Y
.grid--row-end9 grid-row-end: 9; End at the start of 9th row Y
.grid--row-end10 grid-row-end: 10; End at the start of 10th row Y
.grid--row-end11 grid-row-end: 11; End at the start of 11th row Y
.grid--row-end12 grid-row-end: 12; End at the start of 12th row Y
.grid--row-end13 grid-row-end: 13; End at the start of 13th row Y

Start and End Examples

Column positioning

Col 2-4
1
2
3
4

Row positioning

Row 2-4
1
2
3
4
5
6

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.

Container Alignment Classes

Class CSS Definition Responsive?
.ji-auto justify-items: auto; Use the parent's justify value Y
.ji-center justify-items: center; Center items along the x axis Y
.ji-start justify-items: start; Align items to the left Y
.ji-end justify-items: end; Align items to the right Y
.ji-stretch justify-items: stretch; Stretch items to fill available space Y
.ji-unset justify-items: unset; Remove any justification Y

Item Self-Alignment Classes

Class CSS Definition Responsive?
.js-auto justify-self: auto; Use the parent's justify value Y
.js-center justify-self: center; Center item along the x axis Y
.js-start justify-self: start; Align item to the left Y
.js-end justify-self: end; Align item to the right Y
.js-stretch justify-self: stretch; Stretch item to fill available space Y
.js-unset justify-self: unset; Remove any justification Y

Alignment Examples

Default alignment

1
2
3
4
5
6

.ji-center .ai-center

1
2 (.as-start)
3 (.as-stretch)
4 (.js-end)
5
6

Usage Examples

Responsive Grid Layout

<div class="d-grid grid__1 sm:grid__2 md:grid__3 lg:grid__4 g4">
  <div class="bg-white bs-md bar-lg p4">
    <h3 class="fs-h3 fw-bold mb3">Card Title</h3>
    <p class="fc-light-700">Card content goes here.</p>
  </div>
  <!-- More cards -->
</div>

Complex Grid Layout

<div class="d-grid grid__4 g4">
  <header class="grid--col-all bg-blue fc-white p4">
    <h1 class="fs-h2 fw-bold">Page Header</h1>
  </header>
  
  <aside class="grid--col1 bg-light p4">
    <h2 class="fs-h4 fw-bold mb3">Sidebar</h2>
    <nav class="d-flex fd-column g2">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </nav>
  </aside>
  
  <main class="grid--col2 grid--col3 bg-white p4">
    <h2 class="fs-h3 fw-bold mb4">Main Content</h2>
    <p>Main content area with multiple paragraphs...</p>
  </main>
  
  <aside class="grid--col4 bg-light p4">
    <h3 class="fs-h4 fw-bold mb3">Right Sidebar</h3>
    <p>Additional content or widgets.</p>
  </aside>
</div>

Grid with Gaps

<div class="d-grid grid__3 g4">
  <div class="bg-blue fc-white p3 ta-center">Item 1</div>
  <div class="bg-green fc-white p3 ta-center">Item 2</div>
  <div class="bg-purple fc-white p3 ta-center">Item 3</div>
  <div class="bg-orange fc-white p3 ta-center grid--col2">Item 4 (spans 2)</div>
  <div class="bg-red fc-white p3 ta-center">Item 5</div>
</div>

Image Gallery

<div class="d-grid grid__2 sm:grid__3 md:grid__4 g2">
  <div class="bg-light p4 ta-center">
    <img src="image1.jpg" alt="Gallery image 1" class="w100 bar-sm">
  </div>
  <div class="bg-light p4 ta-center">
    <img src="image2.jpg" alt="Gallery image 2" class="w100 bar-sm">
  </div>
  <!-- More images -->
</div>

Dashboard Layout

<div class="d-grid grid__12 grid__r3 g4">
  <div class="grid--col-all grid--row1 bg-blue fc-white p4">
    <h1 class="fs-h2 fw-bold">Dashboard</h1>
  </div>
  
  <div class="grid--col1 grid--col4 grid--row2 bg-light p4">
    <h2 class="fs-h4 fw-bold mb3">Stats</h2>
    <div class="d-flex fd-column g2">
      <div class="bg-white p3 bar-sm">Metric 1</div>
      <div class="bg-white p3 bar-sm">Metric 2</div>
    </div>
  </div>
  
  <div class="grid--col5 grid--col12 grid--row2 bg-white p4">
    <h2 class="fs-h4 fw-bold mb3">Main Content</h2>
    <p>Dashboard main content area.</p>
  </div>
</div>

Fixed Row Height Layout

<div class="d-grid grid__3 grid__r4 g4">
  <div class="bg-blue fc-white p3 ta-center">Header</div>
  <div class="bg-green fc-white p3 ta-center">Sidebar</div>
  <div class="bg-purple fc-white p3 ta-center">Main</div>
  <div class="bg-orange fc-white p3 ta-center">Footer</div>
</div>

Best Practices

✅ Do

  • • Use CSS Grid for two-dimensional layouts (rows and columns)
  • • Combine with gap classes for consistent spacing
  • • Use responsive grid classes for mobile-first design
  • • Define explicit row templates with grid__r[x] for fixed layouts
  • • Leverage column and row spans for complex layouts
  • • Use start/end classes for precise positioning
  • • Consider auto-flow for dynamic content placement

❌ Don't

  • • Use CSS Grid for simple one-dimensional layouts (use Flexbox instead)
  • • Overuse complex positioning when simple spans suffice
  • • Ignore responsive considerations for grid columns
  • • Mix grid with float or absolute positioning unnecessarily
  • • Forget about accessibility when reordering content
  • • Use too many grid lines for simple layouts

When to Use CSS Grid vs Flexbox

Use CSS Grid for:

  • • Two-dimensional layouts (rows and columns)
  • • Complex page layouts (headers, sidebars, main content)
  • • Image galleries and card grids
  • • Dashboard and admin interfaces
  • • When you need precise control over item placement

Use Flexbox for:

  • • One-dimensional layouts (either row or column)
  • • Navigation bars and menus
  • • Button groups and form controls
  • • Centering content (horizontal and vertical)
  • • Flexible component layouts

Conditional Classes

All grid classes support responsive breakpoints and can be combined with other conditional classes:

Responsive Examples

<!-- Responsive grid columns -->
<div class="d-grid grid__1 sm:grid__2 md:grid__3 lg:grid__4 g4">
  <!-- 1 column on mobile, 2 on tablet, 3 on desktop, 4 on large screens -->
</div>

<!-- Responsive grid rows -->
<div class="d-grid grid__2 grid__r2 sm:grid__r3 md:grid__r4 g4">
  <!-- 2 rows on mobile, 3 on tablet, 4 on desktop -->
</div>

<!-- Responsive column spans -->
<div class="d-grid grid__4 g4">
  <div class="grid--col-all sm:grid--col2 md:grid--col1">
    <!-- Full width on mobile, 2 columns on tablet, 1 column on desktop -->
  </div>
</div>

State Modifiers

<!-- Hover effects on grid items -->
<div class="d-grid grid__3 g4">
  <div class="bg-light p4 h:bg-blue h:fc-white t">
    <!-- Changes background and text color on hover -->
  </div>
</div>