Responsive Tracks Without a Media Query

Let available width decide how many minimum-sized columns fit.

auto-fit

One
Two
Three

repeat(auto-fit, minmax(9rem, 1fr)) collapses empty tracks, so the existing items stretch into the available space.

auto-fill

One
Two
Three

auto-fill keeps space for empty tracks that fit. At narrower widths both examples wrap similarly; at wider widths the preserved tracks reveal the difference.

Important HTML

Responsive grids fill available columns automatically.

<div class="auto-fit-demo">…</div>

Important CSS

auto-fit collapses empty tracks; auto-fill keeps them.

.auto-fit-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 8px;
}