Build two-dimensional layouts with CSS Grid

Choose grid for coordinated tracks

CSS Grid lays out direct children in rows and columns that share track sizing. It fits page shells, card collections, comparison regions, and forms whose columns need consistent alignment. Flexbox is often simpler for one row or one column whose items distribute independently.

Start from the information relationship. A data table remains a table; grid does not add tabular semantics. A navigation list remains a list. Grid changes visual arrangement while the HTML continues to describe content.

Create explicit tracks

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
}

The main track can shrink to zero because of minmax(0, 2fr). The supporting track keeps a useful minimum. This layout still needs a narrow breakpoint before the combined minimums exceed available width.

Name important lines or areas when that makes placement readable. Avoid a large ASCII-art area map that hides simple document order. The CSS should explain the composition without becoming a second inaccessible content model.

Build a responsive collection

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1rem;
}

auto-fit creates as many tracks as fit. The inner min() prevents a 16-rem minimum from overflowing a container narrower than 16 rem. Each card can grow to share remaining space. Test actual content because long strings and intrinsic media can still establish a larger minimum.

Do not use responsive repetition merely to avoid choosing hierarchy. A primary card and a secondary card may need different tracks or source positions rather than automatic equality.

Understand intrinsic sizing

Track sizing considers the minimum and maximum contributions of grid items. Because an fr track has an automatic minimum in common patterns, a child with an unbreakable token may force the track wider than the grid. minmax(0, 1fr), min-width: 0, safe text wrapping, responsive media, and local overflow are targeted corrections.

Fixed pixel columns can be valid for truly fixed controls, but they should not encode assumptions about text length. Use min-content, max-content, fit-content(), and bounded flexible tracks only after observing how the content contributes. Intrinsic keywords are not magic; they expose content pressure that still needs review.

Place items without rewriting meaning

Automatic placement follows source order. Explicit line or area placement can display an item elsewhere without changing the DOM. As with flexbox ordering, keyboard and assistive-technology sequences can then disagree with the picture.

Keep the meaningful reading and task order in HTML. Place broad page regions only when the visual result preserves that sequence. Avoid grid-auto-flow: dense for interactive or meaningfully ordered content because later items may backfill visual holes before earlier items while focus remains in document order.

Use subgrid for shared alignment

Subgrid lets a nested grid participate in the tracks of its parent. It can align card headings, descriptions, and actions across a collection without assigning fixed heights. Use it where shared tracks communicate a real relationship; a nested component that should size independently does not need to inherit the outer grid.

Provide a reasonable layout where a target browser does not support a newer feature, or confirm the project's support baseline. Feature queries can add a subgrid enhancement while the ordinary nested grid remains usable.

Common failure patterns

• A hard minimum overflows mobile. Bound it with min() or collapse the composition before padding and gaps consume the viewport.
• A grid replaces a table. Visual columns exist, but row and header relationships disappear. Restore table markup for tabular data.
• Dense placement scrambles focus. Remove dense packing for interactive items and preserve source order.
• Fixed card heights clip content. Align internal tracks or use subgrid instead of constraining text.
• Every item gets coordinates. The stylesheet duplicates the document structure. Let auto-placement handle ordinary sequences.

Verify and practice

Inspect track sizes in browser layout tools. Resize continuously from 320 to wide desktop, then test 200% zoom, long words, translated labels, enlarged default fonts, missing images, validation text, and right-to-left direction. Remove CSS and compare the linear sequence. Tab through every control and make sure the visible path matches that sequence.

For practice, build a small collection of resource cards with auto-fit tracks. Give one card a long title and another a long URL. Prevent page overflow without hiding content. Then create a main-plus-aside composition, collapse it when the content becomes crowded, and explain each track's minimum, maximum, and reason for existing.