CSS Grid auto-fit vs auto-fill: Wrapping Layouts

A list of search results should gain columns when there is room and lose them when there is not. You do not always need a collection of viewport breakpoints to describe that behavior. Grid can calculate how many tracks fit from a minimum useful item size and the space available.

Begin with the minimum useful track

Use the CSS Grid Generator to compare two, three, and four columns with the same gap. Then replace the fixed count with an automatic repeat. The generator helps you inspect track geometry, but the most important input is the content minimum, not a preferred column count.

A card containing a short heading and price might work at fourteen rem. A result with metadata and multiple actions may need more. Measure realistic content before selecting that minimum. A value copied from an unrelated gallery can create awkward wrapping even when the grid itself is functioning correctly.

Keep item source order meaningful. Automatic placement should arrange a sequence that already makes sense, rather than repair markup whose visual order differs from its reading order. This becomes especially important when the number of columns changes independently of the viewport.

Combine repeat with a bounded minimum

A common pattern combines repeat, auto-fit, and minmax. The upper bound allows tracks to share available space. The lower bound establishes when another column is useful. Wrap that minimum in min() so a container narrower than the preferred track can still accommodate one column.

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

.result {
min-inline-size: 0;
}

.result__title {
overflow-wrap: anywhere;
}

The narrow-container guard prevents the fixed sixteen-rem minimum from overflowing a smaller parent. It does not solve every overflow problem inside the item. A fixed-width child, long token, or oversized table can still exceed the track and needs its own content treatment.

MDN’s repeat reference explains automatic repetition. An automatic repeat requires track sizes the browser can use for counting; arbitrary combinations of flexible minimums do not all produce valid syntax. Keep the familiar fixed-or-bounded minimum pattern unless you have a reason to use something more complex.

Understand what happens to empty tracks

Both auto-fill and auto-fit initially determine how many repeated tracks can fit. The difference appears when some of those tracks would be empty. auto-fill keeps the empty tracks; auto-fit collapses them, allowing occupied tracks to expand when flexible maximums distribute remaining space.

With a wide container and two items, auto-fit expansion can make each item much wider than in a full row. That may be exactly right for flexible search results, but inappropriate for compact thumbnails that should retain a consistent apparent width.

Choose auto-fill reservation when the empty columns should still occupy their share. This can keep a sparse collection aligned with the column rhythm expected when more items arrive. It is not a way to insert actual placeholder content; the tracks exist without becoming DOM elements.

Test one item, two items, and a nearly full row. A layout that looks identical with twelve items can behave very differently when filtered down to one. Sparse states are the clearest way to decide which repetition keyword matches the product’s intent.

Account for gaps and intrinsic content

The number of fitting tracks depends on both the track minimum and the gaps between tracks. Four sixteen-rem columns need more than sixty-four rem once their three intervening gaps are included. Border and padding on the container also reduce its content area.

Avoid calculating breakpoints from track widths alone. Let the browser perform the packing, and use the developer tools grid overlay to inspect the actual track boundaries. If an expected column does not appear, check the content box rather than the outer border box.

Read MDN’s minmax reference for sizing details. A flexible maximum does not imply that child content automatically wraps safely. Use intrinsic-size controls on the appropriate item and inspect media, code, and long labels individually.

A useful stress case is a long unbroken identifier in one result. Another is an image with a large intrinsic width. The grid should retain its intended track sizes while the content follows a deliberate wrapping or fitting rule, rather than expanding the whole page unexpectedly.

Separate automatic packing from editorial placement

Automatic repetition is excellent for repeated content with similar structural needs. It is less appropriate when the design requires a precise editorial composition with specific items spanning a fixed number of columns at particular widths.

Be cautious with manual spans inside a grid whose track count can fall to one. An item spanning two columns can create implicit tracks when fewer explicit columns exist, defeating the narrow layout. Add a suitable condition or avoid a span when the minimum track count is not guaranteed.

The MDN Grid layout guide covers explicit and implicit tracks. The existing Grid and Flexbox article offers context when items should size from their own content rather than participate in a shared column structure.

Do not turn on dense placement merely to eliminate every visual gap. It can move later items into earlier holes, producing a visual sequence that differs from document order. A tidy rectangle is not automatically worth that mismatch, especially for ordered results.

Keep a small collection of count fixtures in your HTML and CSS reference: zero, one, two, five, and a larger set. Combine these with narrow and wide parent containers. This gives reviewers a reproducible way to inspect the exact behavior that distinguishes the two keywords.

Finally, document why you chose the minimum track size and repetition mode. A comment such as “preserve empty columns for compact assets” is more useful than repeating the property name. Future maintainers can then adjust values without accidentally reversing the collection’s sparse-state behavior.

Key takeaways

• Choose a minimum track width from real content needs.
• Use a bounded minimum to avoid overflowing very narrow parents.
• Use auto-fit to collapse empty tracks and auto-fill to preserve them.
• Include gaps and container padding when reasoning about fitting columns.
• Test sparse collections and avoid spans that create unintended tracks.