CSS auto-fit vs auto-fill: decide what empty grid tracks should do

When to use it

A review dashboard may show one urgent case or many. Its cards should expand across the row when the result set is sparse, so auto-fit is suitable. A separate calendar-like shelf may need fixed empty slots to keep columns aligned with another row; auto-fill expresses that different requirement. Test one, two, and seven records at a wide viewport, then resize until a single card must occupy a whole row. The minimum in the sample uses min(100%, 19rem) so a very narrow parent does not force the track wider than itself. Put records in meaningful DOM order and avoid dense auto-placement when keyboard focus follows them. The precise card width is a design input, not a device breakpoint. A container query can still be useful when inner card content changes shape, but it is unnecessary just to count columns. Empty tracks are layout space, not a sign that data is missing; the UI needs a separate empty-state message when there are no records.

.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.review-grid > article { min-inline-size: 0; }
.review-grid--reserved { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

Cost and verification

Grid lays out the items already in the DOM; this rule does not reduce their render or network cost. A large record set still needs paging or another data strategy. The maintenance risk is choosing auto-fill because its name sounds more expansive, then wondering why a single card stays narrow beside unused tracks. Inspect sparse and full states in the same parent width. Content with a long unbreakable identifier may overflow inside a correctly sized track, so give the child a local wrapping or scrolling policy. The sample lets grid items shrink, but it does not authorize clipping buttons or hiding case identifiers.

Common Mistakes

• Do not treat auto-fit and auto-fill as interchangeable when the row is sparse.
• Do not assume repeat() chooses a meaningful source order.
• Do not use a fixed minimum wider than the narrowest parent.

Connected lessons

• CSS Property Decisions
• CSS grid tracks: reserve a sidebar without letting content widen the page
• CSS grid auto-placement: let repeated records fill available tracks
• CSS intrinsic sizing: let content set limits without forcing overflow
• CSS container queries: adapt a component to its own space