Module 4 · Layout · Lesson 4 of 5

CSS Grid

Intermediate ⏱ 40 min3 sections · 1 exercise · 4-question quiz

Flexbox rules one dimension; Grid rules two. Columns and rows declared on the parent, children snapping into cells — it's the layout system page-level design waited twenty years for.

1. Columns, rows, and the fr unit

CSS — a 3-column layout in four lines

.layout {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;  /* fixed + 2 shares */
  gap: 20px;
}

The fr unit divides leftover space into fractions: 1fr 2fr gives the second column twice the first. repeat(3, 1fr) shortens equal columns, and children fill cells automatically, left-to-right, wrapping to new rows.

2. The self-responsive card grid

CSS — no media queries required

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

Read it as: "as many columns as fit, each at least 220px, sharing extra space equally." Shrink the container and columns drop out one by one. This single line powers the tool grid on this site's home page.

3. Spanning and placing

CSS — a feature card spanning 2×2

.feature {
  grid-column: span 2;
  grid-row: span 2;
}

Any child can claim more cells with span, or exact tracks with line numbers (grid-column: 1 / 3). For whole page skeletons, grid-template-areas lets you draw the layout as ASCII art — explore it in the Grid Playground.

4. Try it yourself

Turn the container into a responsive grid with repeat(auto-fill, minmax(140px, 1fr)) and a 12px gap, then make the first card span two columns.

exercise.html — editable

5. Quiz — check your understanding

CSS Grid Quiz

4 questions · pass at 60%

Q1. grid-template-columns: 1fr 2fr gives the second column…

2 pixels moreTwice the share of leftover spaceExactly 2%Nothing — invalid

fr units split remaining space proportionally: 1/3 vs 2/3 here.

Q2. Which one-liner creates a self-responsive card grid?

repeat(auto-fill, minmax(220px, 1fr))columns: autoflex-wrap: wrapgrid: responsive

auto-fill + minmax fits as many ≥220px columns as the container allows.

Q3. A child spans two columns with…

width: 200%grid-column: span 2colspan="2"flex: 2

grid-column: span 2 claims two tracks; line numbers work too.

Q4. Grid vs Flexbox in one sentence:

Grid is newer, otherwise identicalFlexbox is 1-dimensional, Grid is 2-dimensionalGrid only works for imagesFlexbox replaced Grid

Flexbox distributes along one axis; Grid controls rows and columns simultaneously.

🏆

Quiz passed? You're one step closer to your certificate.

Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.

Track my progress →