{"id":"l-css-2-2","courseId":"css-mastery","lang":"en","kind":"lesson","summary":"Lay out a page with named grid-template-areas and build a speaker grid that picks its own column count with repeat(auto-fit, minmax()).","html":"

Flexbox lays things out in one direction and lets each line make its own decisions. That’s perfect for a row of filters and wrong for Waypoint’s speaker grid, where every card in a column should line up with the cards above and below it. When you need rows and columns to agree, you want grid.

\n

This lesson builds two layouts on the schedule page: the page shell, with named areas, and the speaker grid, which decides its own number of columns.

\n

Draw the page with template areas

\n

The schedule page has a header across the top, a filter sidebar and the main content. With grid-template-areas you draw that layout directly:

\n
layout.css
.page {\n  display: grid;\n  grid-template-columns: 14rem minmax(0, 1fr);\n  grid-template-areas:\n    \"header  header\"\n    \"filters main\";\n  gap: 1.5rem;\n}\n.site-header { grid-area: header; }\n.filters     { grid-area: filters; }\n.schedule    { grid-area: main; }
\n

Each string is a row; each word inside it is a column. Repeating a name (header header) makes that area span both columns. A . marks an empty cell. Areas must be rectangles: an L-shape is invalid and the whole declaration is dropped.

\n

The pay-off comes when the layout changes. On narrow screens the filters should sit above the sessions, so you redraw the strings instead of moving markup:

\n
CSS
@media (width < 48rem) {\n  .page {\n    grid-template-columns: minmax(0, 1fr);\n    grid-template-areas:\n      \"header\"\n      \"filters\"\n      \"main\";\n  }\n}
\n\n

The fr unit and its hidden minimum

\n

fr divides the free space in the grid after fixed tracks and gaps are subtracted. Two 1fr columns in a 600px grid with a 20px gap are 290px each.

\n

There’s a catch you’ll meet sooner or later: 1fr is shorthand for minmax(auto, 1fr), and auto as a minimum means “at least the content’s min-content width”. Put a long unbroken URL or a code block in one column and it widens, stealing space from the other. That’s why the page shell above uses minmax(0, 1fr): it lets the main column shrink below its content, and any overflow is handled inside it (with overflow-x: auto on the code block, for instance). It’s the grid cousin of the min-width: 0 fix from the previous lesson.

\n

A speaker grid that counts its own columns

\n

Waypoint has 23 speakers. On a phone they should stack; on a laptop, four or five across. One declaration handles every width:

\n
speakers.css
.speakers {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 16px;\n}\n.speaker.featured {\n  grid-column: 1 / -1;\n}
\n

Read it inside out. minmax(180px, 1fr) says each column is at least 180px and at most an equal share of the free space. repeat(auto-fit, …) asks the browser to create as many such columns as fit. In a 640px container with 16px gaps, three 180px columns fit (three columns plus two gaps is 572px) and four don’t, so you get three columns, each stretched to about 203px.

\n

grid-column: 1 / -1 makes the keynote speaker span from the first line to the last, whatever the column count. Negative line numbers count from the end of the explicit grid.

\n
\n Two grids of the same width with two items each. With auto-fill, the items occupy two of four equal columns and two empty dashed tracks remain. With auto-fit, the empty tracks collapse and the two items each take half the width.\n auto-fill\n \n \n \n \n \n empty\n empty\n auto-fit\n \n \n \n
auto-fill keeps empty tracks; auto-fit collapses them so items stretch
\n

The difference between auto-fit and auto-fill only shows when there are fewer items than columns. auto-fill keeps the empty tracks, so two speakers stay card-sized and leave a gap. auto-fit collapses empty tracks to zero, so the two speakers stretch across the row. For a speaker grid that’s sometimes nearly empty (day two has only four speakers), pick based on the design: auto-fill for consistent card widths, auto-fit for a full row.

\n\n

Your turn

\n

The exercise gives you the page shell and the speaker grid with hard-coded columns. Name the areas, switch the speakers to auto-fit, and make the keynote span the whole row. The checks resize the page to make sure the column count adapts. Next, you’ll make the contents of grid cards line up across cards with subgrid.

\n","toc":[{"id":"sec-1","text":"Draw the page with template areas","level":2},{"id":"sec-2","text":"The fr unit and its hidden minimum","level":2},{"id":"sec-3","text":"A speaker grid that counts its own columns","level":2},{"id":"sec-4","text":"Your turn","level":2}],"takeaways":["grid-template-areas lets you draw the layout as ASCII art, and rearranging the page for another screen size means redrawing the strings, not moving markup.","repeat(auto-fit, minmax(12rem, 1fr)) creates as many columns as fit and stretches them to fill the row, with no media queries.","auto-fill keeps empty tracks when there are few items, while auto-fit collapses them so the items stretch to fill the row.","1fr has an automatic minimum of the content size; use minmax(0, 1fr) when a track must be allowed to shrink below its content."],"further":[{"title":"Grid template areas (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Grid_template_areas"},{"title":"repeat() (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/repeat"},{"title":"Grid (web.dev Learn CSS)","url":"https://web.dev/learn/css/grid"}],"quiz":[{"q":"

A speaker grid uses repeat(auto-fill, minmax(180px, 1fr)) in a 900px container but only has two speakers. What do you see?

","options":[{"text":"Two wide cards that share the full 900px.","why":"That’s auto-fit, which collapses empty tracks. auto-fill keeps them."},{"text":"Two cards about 180px wide, with the empty tracks still taking up the rest of the row.","why":"Correct. auto-fill creates as many tracks as fit (five here) whether or not there are items for them, so two cards sit in the first two of five equal columns."},{"text":"Two cards exactly 180px wide, left-aligned, with no extra tracks.","why":"The cards are about that wide, but not because extra tracks are missing. Three empty tracks exist and hold the space; that’s exactly what keeps the two cards narrow."}],"answer":1},{"q":"

What does this layout put in the second row, first column?

\n
CSS
.page {\n  display: grid;\n  grid-template-columns: 14rem 1fr;\n  grid-template-areas:\n    \"header header\"\n    \"filters main\";\n}
\n","options":[{"text":"The element with grid-area: header.","why":"The header area covers both columns of the first row only."},{"text":"Nothing; areas must be rectangular, so this is invalid.","why":"Both areas here are rectangles (header is 1×2, filters and main are 1×1), so the template is valid."},{"text":"The element with grid-area: filters.","why":"Correct. Each string is a row and each word a column, so the second row’s first column is filters."}],"answer":2},{"q":"

A grid with grid-template-columns: 1fr 1fr gets a code block with a very long line in its first column, and the columns become unequal. What’s the fix?

","options":[{"text":"grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)","why":"Correct. A bare 1fr has an automatic minimum equal to the content’s min-content size; minmax(0, 1fr) removes that floor so both columns stay equal."},{"text":"grid-template-columns: 50% 50%","why":"Percentages ignore the gap, so with any gap the grid overflows its container."},{"text":"grid-auto-flow: dense","why":"dense changes how items are placed into holes; it doesn’t affect track sizing."},{"text":"justify-items: stretch","why":"That’s already the default and only affects how items fill their cells, not how wide the tracks are."}],"answer":0}],"exercise":{"kind":"web","mode":"dom","starter":{"html":"
\n
Waypoint Conf 2026
\n \n
\n
Keynote · Ana Ortiz
\n
Kenji Watanabe
\n
Layla Haddad
\n
Tom Becker
\n
Priya Nair
\n
Marcus Lee
\n
\n
","css":".page {\n width: 860px; /* fixed for this exercise */\n display: grid;\n gap: 20px;\n}\n.site-header, .filters, .speaker {\n padding: 12px;\n border-radius: 10px;\n background: #f5f3ff;\n}\n.page {\n grid-template-columns: 200px minmax(0, 1fr);\n}\n\n.speakers {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n}\n"},"solution":{"html":"
\n
Waypoint Conf 2026
\n \n
\n
Keynote · Ana Ortiz
\n
Kenji Watanabe
\n
Layla Haddad
\n
Tom Becker
\n
Priya Nair
\n
Marcus Lee
\n
\n
","css":".page {\n width: 860px; /* fixed for this exercise */\n display: grid;\n gap: 20px;\n}\n.site-header, .filters, .speaker {\n padding: 12px;\n border-radius: 10px;\n background: #f5f3ff;\n}\n.page {\n grid-template-columns: 200px minmax(0, 1fr);\n grid-template-areas:\n \"header header\"\n \"filters main\";\n}\n.site-header { grid-area: header; }\n.filters { grid-area: filters; }\n.speakers { grid-area: main; }\n\n.speakers {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n gap: 16px;\n}\n.speaker.featured {\n grid-column: 1 / -1;\n}\n"},"checks":[{"id":"uses-areas","test":"return style('.page', 'grid-template-areas') !== 'none';"},{"id":"header-spans","test":"const box = (s) => (typeof s === 'string' ? $(s) : s).getBoundingClientRect(); const cols = () => new Set($$('.speaker:not(.featured)').filter((el) => style(el, 'display') !== 'none').map((el) => Math.round(box(el).left))).size; const h = box('.site-header'), f = box('.filters'), m = box('.speakers'); return Math.abs(h.width - 860) < 1 && f.top >= h.bottom && m.top >= h.bottom && f.right <= m.left;"},{"id":"three-columns","test":"const box = (s) => (typeof s === 'string' ? $(s) : s).getBoundingClientRect(); const cols = () => new Set($$('.speaker:not(.featured)').filter((el) => style(el, 'display') !== 'none').map((el) => Math.round(box(el).left))).size; return cols() === 3;"},{"id":"featured-spans","test":"const box = (s) => (typeof s === 'string' ? $(s) : s).getBoundingClientRect(); const cols = () => new Set($$('.speaker:not(.featured)').filter((el) => style(el, 'display') !== 'none').map((el) => Math.round(box(el).left))).size; return Math.abs(box('.speaker.featured').width - box('.speakers').width) < 1;"},{"id":"narrow-two-columns","test":"const box = (s) => (typeof s === 'string' ? $(s) : s).getBoundingClientRect(); const cols = () => new Set($$('.speaker:not(.featured)').filter((el) => style(el, 'display') !== 'none').map((el) => Math.round(box(el).left))).size; const page = $('.page'); page.style.width = '620px'; await tick(16); const n = cols(); page.style.width = ''; await tick(16); return n === 2;"},{"id":"few-items-stretch","test":"const box = (s) => (typeof s === 'string' ? $(s) : s).getBoundingClientRect(); const cols = () => new Set($$('.speaker:not(.featured)').filter((el) => style(el, 'display') !== 'none').map((el) => Math.round(box(el).left))).size; const hide = $$('.speaker').slice(0, 4); hide.forEach((el) => (el.style.display = 'none')); await tick(16); const w = box($$('.speaker')[4]).width; const main = box('.speakers').width; hide.forEach((el) => (el.style.display = '')); await tick(16); return Math.abs(w - (main - 16) / 2) < 1.5;"}],"title":"Name the areas, let the speakers flow","prompt":"

The page is fixed at 860px for this exercise.

\n
    \n
  1. Give .page a grid-template-areas layout: header across both columns on the first row, then filters and main side by side. Assign .site-header, .filters and .speakers to those areas.
    2. \n
  2. Replace the speakers’ fixed repeat(3, 1fr) with columns that are at least 180px, as many as fit, and that stretch to fill the row when there are only a few speakers.
    3. \n
  3. Make the .featured speaker span the full row.
    4. \n
\n

The checks resize the page and hide some speakers to see how your grid reacts.

\n","hints":["Each string in grid-template-areas is one row; repeat a name to span columns.","For the speakers you want repeat() with a keyword that collapses empty tracks, and minmax() with 180px as the minimum.","grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); and .speaker.featured { grid-column: 1 / -1; }."],"explanation":"

grid-template-areas describes the layout as rows of names; header header spans both columns and filters main puts the two side by side, and grid-area drops each element into its slot. For the speakers, minmax(180px, 1fr) sets each column’s range and repeat(auto-fit, …) creates as many as fit: three in the 640px main column, two when the page shrinks. With only two speakers visible, auto-fit collapses the empty tracks so the cards stretch to half the row each; auto-fill would have left them narrow. grid-column: 1 / -1 runs the keynote from the first grid line to the last, whatever the column count.

\n","checkLabels":{"uses-areas":"The page uses grid-template-areas","header-spans":"The header spans the top; filters sit left of the speakers","three-columns":"The speakers form three columns at this width","featured-spans":"The featured speaker spans the full row","narrow-two-columns":"A narrower page gets two columns","few-items-stretch":"With two speakers, they stretch to fill the row"}},"words":678,"readMinutes":3}