A structured lesson workspace with readable content, hands-on examples, and a clean path to completion.
<style>.feature { grid-column: span 2; }</style><main class="feature">Example content</main>
Engineering judgment: Use line names when a complex layout needs durable anchors; use numeric placement for compact local patterns where the grid is simple and unlikely to be rearranged.
<style>.hero { grid-column: 1 / -1; }</style><main class="hero">Example content</main>
The useful mental model here is practical: how line numbers, spans, and auto-placement let one item occupy a deliberate region. When a rule looks obvious but the browser produces something else, start by identifying which constraint or rendering phase is actually winning.
A good CSS change narrows the problem. Use line names when a complex layout needs durable anchors; use numeric placement for compact local patterns where the grid is simple and unlikely to be rearranged. This keeps the rule understandable when content, theme, or viewport conditions change later.
| Concern | What to inspect | Typical failure |
|---|---|---|
| Core behavior | Grid Placement and Spanning | Grid line numbers refer to lines between tracks. They do not name columns themselves, which is why off-by-one mistakes are common when a layout grows. |
| 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 |
In production, Grid line numbers refer to lines between tracks. They do not name columns themselves, which is why off-by-one mistakes are common when a layout grows. That is the kind of bug that survives visual spot checks because the stylesheet is syntactically valid while the layout contract is wrong.
<style>.tile { grid-row: span 2; }</style><main class="tile">Example content</main>
Row span is useful here because it demonstrates grid placement and spanning under a concrete input rather than as an abstract property list.
<style>.demo { grid-template-columns: [full-start] 1fr [content-start] minmax(0, 70rem) [content-end] 1fr [full-end]; }</style><main class="demo">Example content</main>
Named line is useful here because it demonstrates grid placement and spanning 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.