06 · Grid tracks and two-dimensional layout

Understand the mechanism

Grid establishes row and column tracks, then places items within them. Flexbox emphasizes the flow of items on one axis. Card collections and content/sidebar layouts often have explicit column relationships suited to Grid. fr distributes available leftover space rather than an unconditional percentage of the container; gaps and minimum constraints also participate.

repeat avoids repeated declarations and minmax defines lower and upper sizing bounds. auto-fit can collapse empty tracks while auto-fill retains them. minmax(0,1fr) permits flexible tracks to shrink below a content-based minimum, but you must still decide how the content wraps or scrolls rather than defaulting to clipping.

Runnable example

<style>
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:16px}
.cards article{padding:24px;border:1px solid #ccd;background:#f4f7ef;min-width:0}
</style>
<div class="cards"><article><h2>HTML</h2><p>Structure</p></article><article><h2>CSS</h2><p>Layout</p></article><article><h2>JavaScript</h2><p>Behavior</p></article></div>

Trace and verify

Enable the Grid overlay and narrow the page to one column. The min expression allows a track to fit even when the container is narrower than 220px. Remove two cards and compare auto-fit with auto-fill, observing empty-track behavior. Add paragraphs to one card and inspect how default stretching affects items in the same row.

Common mistakes and boundaries

Avoid positioning every item with absolute pixel coordinates. Spanning or placing grid areas does not automatically update source reading order. Grid is not table semantics; real tabular data still needs a table. Nested grids can manage local layout without turning the entire page into one complicated grid.

Practice challenge

Build a 240px sidebar and flexible article on wide screens, stacked on small screens, then add a long code line.

Reference solution and reasoning

Use 240px minmax(0,1fr) for wide screens and overflow:auto on code blocks. Return to one column at narrow sizes, keeping navigation before the article. The code scrolls independently without changing reading order or expanding the whole page.

Further reading

• MDN · CSS Grid