CSS Grid
Flexbox lines boxes up in one direction; grid places them in rows and columns at once. Turn a div into a grid container, give it three column tracks (100px, 1fr and 2fr) and watch the five items flow into the cells in order. Work out by hand how fr shares the free space, see gap open gutters, make one item span from grid line 1 to line 4, then shrink the screen and watch the same CSS fit.
5 quick questions
Pick an answer to see why. Your score saves with your progress.
01A grid container is 400px wide with grid-template-columns: 100px 1fr 1fr; and no gap. How wide is each 1fr track?
The 100px track is fixed, so 400 - 100 = 300px is free. 1fr + 1fr is 2 shares, so each fr track gets 300 / 2 = 150px.
02The same grid now has gap: 20px;. How wide is each 1fr track?
Three tracks have two gutters between them: 2 × 20 = 40px. Free space is 400 - 100 - 40 = 260px, and 260 / 2 = 130px. gap never adds space around the outside edges.
03A grid has 3 columns and 7 items, and grid-template-rows is not set. What happens to the items?
Auto-placement fills each row left to right, then starts a new one. Rows you did not declare are implicit rows, which the browser creates as needed.
04With three column tracks, what does grid-column: 2 / 4; do?
The numbers are grid lines, not tracks. Three tracks sit between lines 1, 2, 3 and 4, so line 2 to line 4 covers tracks 2 and 3.
05The screen gets narrower and the container shrinks. In 100px 1fr 2fr, which tracks change size?
A length like 100px stays 100px. fr tracks share whatever space is left, so they shrink with the container and keep their 1 : 2 ratio.
Glossary
- Grid container
- An element with display: grid. It lays out its children in rows and columns.
- Grid item
- A direct child of a grid container. Each item is placed in one or more grid cells.
- Track
- One column or one row of the grid. grid-template-columns lists the column tracks.
- Grid line
- A dividing line between tracks, numbered from 1. Three column tracks sit between lines 1 to 4.
- fr unit
- A fraction of the free space: what is left after fixed tracks and gutters. 2fr gets twice as much as 1fr.
- Gap
- The gutter between neighbouring tracks, set with gap (or row-gap and column-gap). It is never added at the outside edges.
- Auto-placement
- How the browser puts items with no position of their own into the next free cells, in source order.
- Implicit grid
- Rows or columns the browser creates by itself when items do not fit the tracks you declared.
Notes and sources
- A real browser applies all the declarations at once when it lays out the page. The figure applies them one at a time, in the order of the stylesheet, so you can see what each one does.
- The container is as wide as the space around it. The example assumes 400px (a window 416px wide, minus the body's 8px margins), then 280px on a narrower screen.
- No row sizes are set, so each row is only as tall as its content, one line of text here. The figure draws the rows taller, and the blocks a little inside their cells, so the letters are easy to see.
- 1fr is really minmax(auto, 1fr): an fr track never gets narrower than its content. One letter is far narrower than 50px, so the plain sums hold.
- Save the full page as index.html and the rules as style.css in the same folder, then open index.html. In the browser dev tools, the grid inspector draws the same tracks and numbered lines.
Quiz Unlocks after the last step.