CSS Grid

Two-dimensional layouts with rows, columns, fr units and named areas.

Lesson 20 of 49Intermediate14 min read

CSS Grid lays content out in two dimensions: rows and columns at the same time. Photo galleries, dashboards, card grids and complete page layouts are where Grid works best.

If Flexbox is a queue of people standing in one line, Grid is a chessboard. You describe the rows and columns once on the parent, and the children slot into the cells. That makes complex layouts surprisingly short to write, and easy to rearrange for different screen sizes.

Grid is supported by every modern browser, so you can use it on real projects today.

Defining grid columns

CSS
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 16px;
}
  • display: grid makes the parent a grid container.
  • grid-template-columns lists the width of each column. The children fill the cells from left to right, then wrap onto new rows automatically.
  • gap sets the space between rows and columns.

You can define rows the same way with grid-template-rows, but you often don't need to. Rows are created automatically and grow to fit their content.

The fr unit

fr means "a fraction of the available space". With 1fr 2fr, the second column is twice as wide as the first. repeat(3, 1fr) creates three equal columns without typing 1fr three times.

fr works like flex-grow in Flexbox, but for grid columns and rows. It shares out whatever space is left after fixed sizes, such as the 200px column above, have been taken.

Responsive grids without media queries

CSS
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Read it as: "Make as many columns as will fit, each at least 200px wide, and share any leftover space between them." On a phone you get one column; on a laptop you might get four. This single line powers a huge number of card layouts on the web, including the course cards on this site.

Placing and spanning grid items

  • grid-column: span 2 makes an item two columns wide.
  • grid-column: 1 / -1 stretches an item from the first grid line to the last, making it full width.
  • grid-row: span 2 makes an item two rows tall.

Spanning is how you create a larger "featured" tile in a gallery or a banner that runs across the top of a card grid.

Page layouts with named grid areas

For page layouts, you can name areas and draw the layout as text:

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

The layout is readable at a glance, and changing it for phones is as simple as redrawing the areas inside a media query.

CSS Grid Syntax

Grid essentials

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 1rem;
  place-items: center;
}
.wide { grid-column: span 2; }

CSS Grid Summary

  • CSS Grid arranges items in rows and columns at the same time.
  • grid-template-columns defines the columns; rows are created automatically.
  • fr shares available space, and repeat() avoids repeating values.
  • repeat(auto-fit, minmax(200px, 1fr)) creates a responsive grid with no media queries.
  • Use span to make items larger and grid-template-areas for page layouts.

CSS Grid Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

A simple 3-column grid

.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 10px;
}

.grid div {
  padding: 20px;
  background: #e1e6ff;
  border: 2px solid #4467ff;
  border-radius: 8px;
  font: bold 18px sans-serif;
  text-align: center;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 2Turn on Grid.
  2. Line 3Three columns; the middle one gets twice the available space.
  3. Line 410px between all rows and columns.
Example 2

Responsive photo gallery

No media queries are needed. Resize the result to see the number of columns change.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}

.gallery img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 10px;
}

.gallery img:first-child {
  grid-column: span 2;
  grid-row: span 2;
  height: 100%;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 3As many columns as fit, each at least 140px.
  2. Line 10object-fit: cover crops photos neatly to fill their cells.
  3. Lines 14 to 18The first photo spans 2 columns and 2 rows, creating a "featured" tile.
Example 3

A page layout with named areas

.page {
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-template-rows: auto 160px auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  gap: 8px;
  font: bold 15px sans-serif;
}

header { grid-area: header; background: #ffd23f; }
aside  { grid-area: sidebar; background: #d6f4e4; }
main   { grid-area: main; background: #e1e6ff; }
footer { grid-area: footer; background: #ffe3d7; }
.page > * { padding: 12px; border-radius: 8px; }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Lines 3 to 4Two columns and three rows.
  2. Lines 5 to 8The layout drawn as text. Each word is an area name.
  3. Lines 13 to 16Each element claims its area by name.

Common CSS Grid Mistakes

Forgetting display: grid

Don't
.cards { grid-template-columns: repeat(3, 1fr); }
Do
.cards { display: grid; grid-template-columns: repeat(3, 1fr); }

Grid properties do nothing until the container is a grid.

Fixed columns that break on phones

Don't
.cards { display: grid; grid-template-columns: 300px 300px 300px; }
Do
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

Three 300px columns need 900px, so on a phone they overflow the screen.

CSS Grid in Real Projects

Grid powers modern layouts

Dashboards (Notion, analytics tools), image galleries (Unsplash, Pinterest-style grids), product listings, magazine layouts, and the main layout of many apps use CSS Grid. The lesson page you're reading is a grid: sidebar, content and table of contents.

CSS Grid Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Create three equal columns with a 20px gap.

.grid {
  display: ;
  grid-template-columns: repeat(3, );
  : 20px;
}
Multiple choicemedium

What does 1fr mean?

Multiple choicemedium

Which makes an item stretch across every column?

Predict the outputhard

How many columns appear in a 700px-wide container?

.g { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; }
Fix the bugmedium

The dashboard should have a sidebar 120px wide and a main area taking the rest, with 10px gap. Fix the CSS.

.dash {
  grid-template-columns: 120 fr;
  gap: 10px;
}

.dash > * { background: #e1e6ff; padding: 10px; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Dash is a grid
  • Sidebar is 120px wide
  • Main area fills the rest
  • 10px gap

CSS Grid Quiz

3 questions to check what you learned.

  1. Grid is designed for layouts in…

    • two dimensions (rows and columns)
    • one dimension
    • three dimensions
    • text only

  2. What does grid-column: span 2 do?

    • Moves the item to column 2
    • Adds 2 columns to the grid
    • Makes the item two columns wide
    • Creates a 2px gap

  3. What does minmax(200px, 1fr) mean?

    • Exactly 200px
    • Between 1px and 200px
    • 200 columns
    • At least 200px, at most one fraction of available space

CSS Grid Challenge

Build a card grid

Make .cards:

  1. A grid with repeat(auto-fit, minmax(150px, 1fr)) columns
  2. A gap of 16px
  3. Make the .wide card span the full row (grid-column: 1 / -1)
.card { padding: 20px; background: #fff1c2; border: 2px solid #15161b; border-radius: 12px; font: 600 15px sans-serif; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Cards is a grid
  • 16px gap
  • Uses auto-fit minmax columns
  • The wide card spans the full row

Related CSS topics

19FlexboxLine things up in rows or columns, space them out and centre anything.34Media QueriesAdapt layouts to phones, tablets and desktops, starting with mobile.16DisplayControl how a box behaves: block, inline, inline-block, none, flex, grid.
Esc
↑↓ to navigateEnter to open