CSS Grid — HTML & CSS Course

What you'll learn

CSS Grid is the most powerful layout system on the web. Where Flexbox handles one dimension, Grid handles two — rows and columns at once — making it the ideal tool for page layouts, card galleries, and any real grid of content.

By the end you'll be able to:

Create a grid and define its columns and rows
Use the fr unit, repeat(), and minmax()
Build a responsive card grid with one line
Lay out a whole page with named areas

Grid basics

Add display: grid and define your columns with grid-template-columns. Each value is a track (a column width). Here's a classic sidebar layout — a fixed 200px sidebar and a flexible main area:

layout.css

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;  /* sidebar + flexible main */
  gap: 20px;
}

Tracks, fr & repeat

The fr unit means "a fraction of the free space," so 1fr 1fr makes two equal columns. repeat(3, 1fr) is shorthand for three equal columns. The real magic combines repeat() with auto-fit and minmax() to build a responsive grid with no media queries — columns automatically fit and wrap based on available space:

cards.css

.cards {
  display: grid;
  /* as many 200px+ columns as fit, each sharing space equally */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

cards.html

Live preview

repeat(auto-fit, minmax(...)) — a responsive grid that reflows on its own.

Key idea

repeat(auto-fit, minmax(200px, 1fr)) is one of the most useful lines in all of CSS. It says "fit as many columns as you can, each at least 200px, sharing leftover space equally" — a fully responsive card grid, no breakpoints required. Memorise it.

Placing items

By default items flow into cells in order, but you can place them explicitly. grid-columnand grid-row let an item span multiple tracks — for example grid-column: span 2 makes a card twice as wide, and gap sets the space between all cells.

Named areas

For whole-page layouts, grid-template-areas is beautifully readable: you literally draw the layout with names, then assign each element to an area. The structure is visible right in the CSS:

page.css

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

Note

Grid vs Flexbox — when to use which? Reach for Flexbox for content in a single direction (a nav bar, a row of buttons, centering). Reach for Grid when you need control in two directions at once (a page layout, an image gallery). They work together happily — Grid for the page, Flexbox inside the pieces.

Recap & quick check

Key takeaways

display: grid plus grid-template-columns defines columns; each value is a track.
The fr unit shares free space; repeat() and minmax() build flexible track lists.
repeat(auto-fit, minmax(200px, 1fr)) creates a responsive grid with no media queries.
grid-column / grid-row place and span items; gap spaces the cells.
Grid is two-dimensional (rows + columns); Flexbox is one-dimensional — use them together.

Quick check

1. What makes CSS Grid different from Flexbox?

2. What does the fr unit represent?

3. What does grid-template-columns: repeat(3, 1fr) create?

4. Which builds a responsive grid without media queries?

5. When should you prefer Flexbox over Grid?

You command both layout systems now. Next we make everything adapt to any screen with responsive design and media queries.