Read it as an instruction: fit as many columns as you can, where each one is at least 240px and otherwise shares the space equally. On a wide screen that gives four columns. On a phone it gives one. You wrote no media queries at all.
Named areas. For a page skeleton you can draw the layout in the stylesheet itself using grid-template-areas, then assign each region a name. It is unusually readable, because the CSS looks like the thing it produces.
LIVE PREVIEW
loading editor…
The quoted strings in grid-template-areas are a picture of the layout. Two words per row, two columns.
Your turn → Swap sidebar and main in the middle row so the sidebar moves to the right. You changed the visual order without touching the HTML, which means the reading order for a screen reader is unaffected.
◈ Graded Build
Build the project gallery for your portfolio. Give the gallery display grid, a 1.5rem gap, and columns that fit as many as possible at a minimum of 220px each using auto-fit and minmax, so it responds without a single media query.
Checked against the page you actually render, not against how you wrote it. 3 visible and 2 hidden checks.
loading editor…
Mark this lesson complete
Signed in, your progress follows you to every device.