Auto-fit and Auto-fill with minmax

The most powerful CSS Grid pattern: a fully responsive grid that adjusts column count automatically without any media queries, using auto-fit or auto-fill combined with minmax().

auto-fill fills the row with as many columns as it can fit at the given minimum size. Empty columns are preserved as empty tracks at the end.

auto-fit works like auto-fill but collapses empty tracks to zero width. Existing items stretch to fill the remaining space.

The difference only matters when there are fewer items than can fill the row:

• auto-fill: empty column tracks remain, items do not stretch to fill
• auto-fit: empty tracks collapse, items expand to fill all available width

The famous responsive grid pattern — items are at least 250px wide, grow to fill space, and wrap to new rows automatically:

minmax(min, max) defines a track size range. The track will not be smaller than min or larger than max. Combined with fr, it creates flexible tracks bounded by a minimum.

When you want items at a fixed size and allow empty space at the end:

This is the main benefit: repeat(auto-fit, minmax(280px, 1fr)) automatically adapts from 1 column on mobile to as many columns as fit on larger screens:

Avoid layout issues in tiny containers by using min(100%, 280px) as the minimum instead of a raw pixel value:

With auto-fill, empty tracks at the end maintain alignment when items count is not a multiple of columns — useful for consistent grids.

Flexbox flex-wrap + flex: 1 1 250px is similar but does not guarantee equal column widths — items may stretch unevenly. Grid with minmax ensures perfectly uniform tracks.

repeat(auto-fit, minmax(250px, 1fr)) is the single most powerful responsive grid pattern — zero media queries needed. auto-fit collapses empty tracks so items fill the row. auto-fill preserves empty tracks for consistent alignment. Always pair with gap for gutters.