26. CSS Grid

What you will learn

What CSS Grid is and how it differs from Flexbox
How to define columns and rows
The fr unit and repeat()
How to make a responsive card grid without media queries
How to place items across several cells

What is Grid?

CSS Grid is a layout system for arranging items in rows and columns at the same time. Flexbox handles one direction at a time, while Grid handles two. Turn it on with display: grid on the container.

Defining columns

grid-template-columns sets the columns. The fr unit means “a fraction of the free space”.

Example

<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }
  .grid div {
    background-color: #0d6efd;
    color: white;
    padding: 16px;
    text-align: center;
  }
</style>

<div class="grid">
  <div>1</div> <div>2</div> <div>3</div>
  <div>4</div> <div>5</div> <div>6</div>
</div>

Output

Six items fall into three equal columns, and the grid creates the second row for you.

Useful column values

Value	Meaning
`repeat(3, 1fr)`	Three equal columns, a shorter way to write `1fr 1fr 1fr`
`200px 1fr`	A fixed 200px column, then one that takes the rest
`1fr 2fr`	The second column is twice as wide as the first
`repeat(auto-fit, minmax(160px, 1fr))`	As many columns as fit, each at least 160px

A responsive grid with no media queries

Example

<style>
  .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }
  .cards div {
    background-color: #eaf5ff;
    border: 1px solid #cfe6ff;
    border-radius: 8px;
    padding: 16px;
  }
</style>

<div class="cards">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>

Output

Card 1

Card 2

Card 3

Card 4

Resize the window: the grid changes from four columns to two to one by itself.

Rows, gaps, and spanning

gap sets the space between rows and columns (row-gap and column-gap set them separately).
grid-template-rows sets row heights.
grid-column: span 2 makes an item cover two columns.
grid-row: span 2 makes it cover two rows.

Example

<style>
  .page {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 8px;
  }
  .page div { padding: 14px; background-color: #eaf5ff; border: 1px solid #cfe6ff; }
  .head { grid-column: span 2; background-color: #082b59 !important; color: white; }
</style>

<div class="page">
  <div class="head">Header (spans both columns)</div>
  <div>Sidebar</div>
  <div>Content</div>
</div>

Output

Header (spans both columns)

Sidebar

Content

Named areas

grid-template-areas lets you draw the layout with words, which is easy to read.

Syntax

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Grid or Flexbox?

Use Flexbox for one row or column of items: menus, button groups, centring.
Use Grid for a layout with rows and columns: page layouts, galleries, card grids.
They work well together. A grid can hold flex containers inside its cells.

Common mistakes

Putting display: grid on the items instead of the container.
Forgetting gap and then adding margins on every item.
Using fixed pixel columns that overflow on small screens.
A misspelled area name in grid-template-areas, which breaks the layout.

Exercise

Make .gallery a grid with three equal columns and a 12px gap. Give every child div a #eaf5ff background and 20px of padding.

Show solution

<style>
  .gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .gallery div {
    background-color: #eaf5ff;
    padding: 20px;
  }
</style>
<div class="gallery">
  <div>A</div><div>B</div><div>C</div>
  <div>D</div><div>E</div><div>F</div>
</div>

Knowledge check

1. What does the fr unit mean?

A fraction of the available space in the grid.

2. Which property makes an item cover two columns?

grid-column: span 2

3. When is Grid a better choice than Flexbox?

When you need rows and columns together, such as a page layout or gallery.

Summary

Grid lays out items in rows and columns.
Use repeat(), fr, and minmax() for flexible columns.
repeat(auto-fit, minmax(...)) makes responsive grids without media queries.