CSS grid auto-placement: let repeated records fill available tracks

When to use it

A shipment overview shows a variable number of independent cards. Define responsive columns and let the browser place each card in document order. Avoid manually assigning a line to every record because pagination and filtering will change the item count. The minmax expression gives each card a useful minimum when there is room and permits one full-width track when there is not. Dense packing can backfill gaps but may produce a visual order different from source order; skip it for an interactive record list. A tall card should simply make its row taller. Test one card, an odd count, and a card with long status text. If all cards must align internal details, use a subgrid only where the parent track relationship is real.

.shipment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.shipment-grid__card { min-inline-size: 0; padding: 1rem; border: 1px solid #aebfcb; }

Cost and verification

Automatic placement avoids per-item CSS and makes changes to the record set cheap editorially. Layout still processes every rendered card, so paginate a very large collection. The sample creates as many tracks as fit; a parent with an indefinite or tiny width needs real testing. Do not confuse grid's visual placement with data sort order. If server results are ordered by severity, the DOM should carry that order. Inspect keyboard traversal after any responsive or dense placement change, and allow cards to grow with their text instead of fixing a height.

Common Mistakes

• Do not use grid-auto-flow: dense on an interactive list without checking reading order.
• Do not assign explicit lines to every data-driven card.
• Do not render thousands of cards merely because auto-placement is concise.

Connected lessons

• CSS Property Decisions
• CSS grid tracks: reserve a sidebar without letting content widen the page
• CSS subgrid: align nested card content to shared tracks
• CSS intrinsic sizing: let content set limits without forcing overflow

Further rendering decisions

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