HTML & CSS / Adaptable interfaces / Lesson 8

Grid tracks and intrinsic sizing

Create two-dimensional relationships while distinguishing track fractions, minimum content pressure, and deliberate placement.

About 4 min readContent reviewed 2026-10-25

On this page

Lesson goals

Tracks express shared relationships
Build a constrained two-column layout
Avoid visual and logical divergence

Tracks express shared relationships

Grid defines rows and columns whose tracks can align items across both dimensions. Direct children become grid items, while their internal contents retain their own layout. Explicit tracks come from template definitions; implicit tracks are created when placement needs additional space. The fr unit distributes remaining space rather than representing an unconditional percentage of the full container. Gaps occupy space separately. Start with the relationships the design needs, such as equal cards or a sidebar beside content, and choose a concise track model. Not every page requires named areas or manual coordinates for each item.

Minimums matter more than they look

A track written as 1fr can retain an automatic minimum influenced by its content. Two fraction tracks can therefore overflow when a child contains an unbreakable token or wide media. minmax(0, 1fr) explicitly allows a track to shrink below that content-based minimum, but the content still needs its own wrapping or overflow policy. Similarly, min-inline-size: 0 on the relevant item can remove an item-level constraint. These are tools for specific obligations, not magic declarations to paste everywhere. Inspect track size, item size, and the oversized descendant separately before choosing the correction.

Build a constrained two-column layout

The first example creates two equal fraction tracks with explicit zero minimums. Each card permits long text to wrap and retains its heading in source order. At the narrow breakpoint the grid becomes one column, because equal fractions alone do not guarantee usable card widths. The chosen breakpoint is illustrative; a real component should switch when its content requires the change. Grid does not add table semantics: these are independent topic cards, so articles are appropriate. If rows and columns encode data relationships, use a semantic table and choose its presentation separately.

html Responsive tracks

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive tracks</title>
<style>
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .grid article { min-inline-size: 0; overflow-wrap: anywhere; } @media (max-width: 35rem) { .grid { grid-template-columns: 1fr; } }
</style>
</head>
<body>
<main><h1>Two topics</h1><div class="grid"><article><h2>Markup</h2><p>Meaning and relationships.</p></article><article><h2>Layout</h2><p>averylongreferencewithoutspaces0123456789</p></article></div></main>
</body>
</html>

Expected output

Two columns at wider sizes; one column below the example breakpoint.

The tracks share space, and the explicit breakpoint stacks the cards on narrow viewports. Text wrapping addresses content inside the tracks.

Let repetition respond to available space

The second example uses repeat with auto-fit and a minimum track size capped by the available width. min(100%, 14rem) avoids demanding a fourteen-rem column from a container narrower than that value. auto-fit collapses empty repeated tracks after placement, while auto-fill can keep the empty track structure; choose the behavior intentionally. This pattern handles many card collections without a separate breakpoint for each column count. It still needs readable content, sensible maximum widths where appropriate, and testing under longer translations. An automatically generated track count is not evidence that all possible cards remain usable.

html Auto-fit cards

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Auto-fit cards</title>
<style>
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } article { padding: 1rem; border: 1px solid; overflow-wrap: anywhere; }
</style>
</head>
<body>
<main><h1>Topic cards</h1><div class="cards"><article><h2>HTML</h2><p>Structure.</p></article><article><h2>CSS</h2><p>Presentation.</p></article><article><h2>Access</h2><p>Inclusive use.</p></article></div></main>
</body>
</html>

Expected output

Cards occupy as many usable columns as the container permits.

The repeat count follows available space. The capped minimum permits a single track even below fourteen rem.

Avoid visual and logical divergence

Grid placement can move an item visually without moving its DOM position. Screen-reader reading and ordinary keyboard order therefore remain tied to source relationships rather than the visual map alone. Dense auto-placement can fill gaps by displaying later items earlier, which may be unsuitable for a meaningful sequence. Use it only when order truly does not matter and verify interaction. Developer-tool grid overlays reveal explicit and implicit tracks and help explain unexpected extra columns. Test missing items, additional items, long strings, and nested layouts. A maintainable grid makes track ownership and order constraints understandable without recreating the designer’s screen in fixed coordinates.

Common errors and fixes

Two 1fr columns exceed the viewport

Why it happens: Content-based minimums prevent the expected shrink.
How to fix it: Inspect minimums and combine track sizing with wrapping.
Prevent it next time: Include unbroken tokens and wide media in tests.

An unexpected extra column appears

Why it happens: Placement created an implicit track.
How to fix it: Inspect grid lines and correct the requested position.
Prevent it next time: Use overlays to review implicit tracks.

Reading order conflicts with visible cards

Why it happens: Manual or dense placement reordered presentation.
How to fix it: Keep source and visual sequence coherent.
Prevent it next time: Test keyboard and linear reading after placement changes.

Check your understanding

1. Explain why minmax(0, 1fr) does not by itself wrap an oversized word.

Show worked solution

It changes the track’s permitted minimum, not the text’s breaking rules. The track may now shrink while the word still paints outside it. Add an appropriate content policy such as overflow-wrap where breaking is acceptable, and verify that nested items do not retain another minimum constraint.

2. When should a responsive card layout become a table instead?