Lesson 5: CSS Grid

Flexbox handles one row or column at a time. CSS Grid handles the whole page at once — rows and columns together. This is the tool behind full page layouts: header, sidebar, main content, footer, all defined in one place.

Turning on Grid

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  gap: 16px;
}

grid-template-columns: 1fr 1fr 1fr;

The fr unit means "a fraction of the available space." Three equal 1fr columns split the width evenly — no percentage math, no guessing.

Unequal columns, on purpose

.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* fixed sidebar, flexible content */
}

This is the exact pattern behind a classic sidebar layout: a fixed 200px column that never changes size, next to a content column that fills whatever space is left.

Rows work the same way

.page {
  display: grid;
  grid-template-rows: auto 1fr auto; /* header, content, footer */
  min-height: 100vh;
}

auto means "just as tall as the content needs." This three-row pattern — header sized to its content, content filling remaining space, footer sized to its content — is how you pin a footer to the bottom of the screen even on short pages.

grid-template-areas: naming your layout

This is Grid's most readable feature — you can literally draw your layout as text:

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

Each word in grid-template-areas is a named region. Assign any element to a region with grid-area, and it snaps into place — no counting columns or calculating positions.

Grid vs. Flexbox: which one to reach for

	Flexbox	Grid
Dimensions	One direction at a time (row OR column)	Two directions at once (rows AND columns)
Best for	Nav bars, button groups, centering content	Full page layouts, image galleries, dashboards
Common combo	Grid for the overall page, Flexbox inside individual sections — extremely common together

Responsive grid without media queries

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

This single line creates a grid that automatically fits as many 200px-minimum columns as will comfortably fit, and reflows them as the screen resizes — no @media breakpoints needed for a huge number of layouts.

Try it yourself

exercise

Build a simple page skeleton using grid-template-areas: a header, a 200px sidebar, a main content area, and a footer. Confirm it holds together as you resize your browser window.

Level up: a responsive gallery

exercise 2

Create 6 .card divs inside a container using grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) and gap: 20px. Resize the window and watch the number of columns adjust automatically — no breakpoints written by you at all.

✓ quick check — 3 questions

1. What does the fr unit represent in CSS Grid?

A fixed number of pixels A fraction of the available space A percentage of the font size

2. Which is better suited for a full page layout with a sidebar, header, and footer?

CSS Grid Flexbox only Neither — you need floats

3. What does repeat(auto-fit, minmax(200px, 1fr)) do?

Repeats the same image 200 times Forces exactly 200 columns Fits as many 200px+ columns as space allows, responsively

what's next

Lesson 6 is the final project — you'll use everything from this course (structure, box model, Flexbox, and Grid) to build one complete, real landing page from scratch.

bottom line

Grid handles two-dimensional layouts — rows and columns together — in a way Flexbox alone can't. grid-template-areas makes complex layouts genuinely readable, and auto-fit/minmax gives you responsive grids without writing a single media query.

CSS Grid for Real Page Layouts

Turning on Grid

Unequal columns, on purpose

Rows work the same way

grid-template-areas: naming your layout

Grid vs. Flexbox: which one to reach for

Responsive grid without media queries

Try it yourself

Level up: a responsive gallery