A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
<style>.grid { grid-template-columns: repeat(3, 1fr); }</style><main class="grid">Example content</main>
Engineering judgment: Use repeat() for patterns that truly repeat. Spell out exceptional tracks when the design has a semantic structure that should remain obvious to the next engineer.
<style>.demo { grid-template-rows: auto 1fr auto; }</style><main class="demo">Example content</main>
A good CSS change narrows the problem. Use repeat() for patterns that truly repeat. Spell out exceptional tracks when the design has a semantic structure that should remain obvious to the next engineer. This keeps the rule understandable when content, theme, or viewport conditions change later.
The useful mental model here is practical: how columns, rows, gaps, and track sizing combine into a two-dimensional layout. When a rule looks obvious but the browser produces something else, start by identifying which constraint or rendering phase is actually winning.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Grid Columns, Rows, and Gaps | The gap is space between tracks, not an extra track. It participates in the total space calculation and therefore affects how many fractional units remain. |
| Production test | Real content and constraints | The rule works only for the demo values |
| Maintenance | Scope and override path | A later fix creates another exception |
A good CSS change narrows the problem. Use repeat() for patterns that truly repeat. Spell out exceptional tracks when the design has a semantic structure that should remain obvious to the next engineer. This keeps the rule understandable when content, theme, or viewport conditions change later.
<style>.demo { column-gap: 1.5rem; }</style><main class="demo">Example content</main>
Column gap is useful here because it demonstrates grid columns, rows, and gaps under a concrete input rather than as an abstract property list.
<style>.demo { gap: 1rem 2rem; }</style><main class="demo">Example content</main>
Two-axis gap is useful here because it demonstrates grid columns, rows, and gaps under a concrete input rather than as an abstract property list.
Finish the lesson once you have worked through the material. This awards ★ 30 XP.