Learn / HTML & CSS Fundamentals / CSS Grid
Lesson 5 of 6

CSS Grid

Picture a spreadsheet versus a single sentence. A sentence flows one word after another, in one direction — that's Flexbox. A spreadsheet has rows and columns at the same time, and you can drop a value into row 3, column 2 without caring what's in row 1 at all. When a layout needs that kind of two-dimensional grid — a photo gallery, a dashboard, a page-level layout with a header, sidebar, and content area — CSS Grid is the tool built for exactly that shape of problem.

💡 The Bottom Line

Grid is a two-dimensional layout system: display: grid plus grid-template-columns and grid-template-rows define a set of tracks, and gap puts space between them without any margin math. Reach for Grid when you're laying things out in both directions at once; reach for Flexbox when you're arranging things along a single line.

Defining the grid

<div class="gallery">
  <div class="photo">1</div>
  <div class="photo">2</div>
  <div class="photo">3</div>
  <div class="photo">4</div>
</div>
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

1fr 1fr 1fr creates three equal-width columns that share the available space — "fr" stands for "fraction of the remaining space." The four .photo children drop into that grid automatically, wrapping into a second row once the first row is full. No manual row-breaking, no floats, no clearfix hacks.

Rows, and mixing fixed with flexible tracks

.page {
  display: grid;
  grid-template-columns: 220px 1fr;   /* fixed sidebar, flexible content */
  grid-template-rows: 80px 1fr 60px;  /* header, main, footer */
  gap: 12px;
  min-height: 100vh;
}

This one rule lays out a whole page skeleton — a fixed-width sidebar next to a content area that stretches to fill whatever's left, stacked with a fixed-height header on top and footer on the bottom. That's the classic "app shell" layout, and it used to take absolute positioning or table hacks before Grid existed.

⚠️ Watch Out

Grid and Flexbox solve different shapes of problem, and reaching for the wrong one causes unnecessary fighting with the layout. If you catch yourself adding a second flex-wrap row and trying to line its items up with the row above, that's usually a sign the layout is secretly two-dimensional — stop and switch to Grid instead of forcing Flexbox to fake it.

🙋 There Are No Dumb Questions

Q: Can I use Grid and Flexbox together on the same page?
A: Yes, and in real projects you almost always do. A common pattern: Grid lays out the overall page skeleton (header, sidebar, main, footer), and Flexbox is used inside individual pieces of that grid — like centering a logo and nav links inside the header row. They're complementary tools, not competitors.

When to reach for which

🔧 Try It Yourself

Build a container with six <div> "cards" inside it. Set display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; and watch them snap into a neat 3-column, 2-row grid. Then change repeat(3, 1fr) to repeat(2, 1fr) and notice the same six cards now form a 2-column, 3-row grid with no other changes needed.

✅ Quick Check

You need a page layout with a fixed-width sidebar, a flexible main content area, and a header spanning the top — rows and columns need to line up together. Which tool fits best?

Next up: everything so far assumes one screen size. What happens when the same page has to work on a phone, a tablet, and a widescreen monitor? That's responsive basics.

← Back to
Next →