One of CSS Grid's most useful tricks is that it can build a fully responsive, reflowing layout without a single @media query. Instead of telling the browser exactly how many columns to show at each screen width, you describe the rules for a column — its minimum size — and let the browser work out how many fit.

This pattern shows up constantly in real sites: product grids, image galleries, card layouts, dashboards. Once you've written it once, you'll reach for it instead of a stack of breakpoint-specific media queries almost every time.

The Pattern

<div class="gallery">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">5</div>
</div>
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

On a wide screen, this fits as many 200px-or-wider columns as the container allows, stretching them evenly to fill the row. Shrink the browser window and columns drop down one by one, automatically wrapping onto new rows, until on a phone-sized screen you're left with a single column — all without writing one media query.

Breaking Down Why It Works

  • repeat(auto-fit, ...) tells the browser to repeat the column definition as many times as will fit in the available width.
  • minmax(200px, 1fr) sets each column's floor at 200px, but lets it grow to share any leftover space equally with its siblings.

Together, the browser recalculates the column count on every resize: wide enough for five 200px+ columns, it shows five; shrink to three columns' worth of space, it shows three and grows each one to fill the row.

auto-fit vs auto-fill

auto-fill is a close cousin with one key difference: if there isn't enough content to fill a row, auto-fill still reserves space for the empty columns that could have existed, while auto-fit collapses that empty space and lets the existing items stretch to fill it. For most card/gallery layouts, auto-fit is what you want — it avoids leaving an awkward gap when there are only two or three items.

When You Still Need a Media Query

This pattern is excellent for repeating, same-sized content like cards — but it doesn't replace every use of media queries. If you need to restructure a layout entirely at a breakpoint (for example, moving a sidebar from beside the content to below it, as covered in grid template areas), a media query is still the right tool. Use this auto-fit pattern for flexible content grids, and media queries for structural layout changes.