Responsive Grid Layouts Without Media Queries

The Traditional Approach: Media Queries

Historically, changing a grid from four columns to two, then to one, meant writing a separate media query for every breakpoint the design needed - functional, but verbose, and it only reacts to the screen size, not the container's actual available space.

The Modern Approach: auto-fit and minmax()

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

This single line creates a fully responsive grid: as many columns as will fit, each at least 200px wide, each stretching to share any leftover space evenly - with zero media queries required.

How This Works, Step by Step

• minmax(200px, 1fr) tells each column to never shrink below 200px, but to grow and share extra space (1fr) when there is room.
• auto-fit tells Grid to fit as many of those columns as possible into the available width, collapsing any leftover empty tracks.
• As the container shrinks, fewer 200px-minimum columns fit, so the grid naturally reflows to fewer columns - and more columns appear again as it grows.

A Related Choice: auto-fit vs auto-fill

auto-fill behaves similarly but keeps empty placeholder tracks reserved even when there are not enough items to fill them, which can leave visible gaps. auto-fit collapses those empty tracks away, which is usually the more visually correct choice for a card gallery.

When You Still Need a Media Query

This technique is ideal for uniform card grids, but a layout with fundamentally different structure at different sizes - like a sidebar that should disappear entirely on mobile - is still best handled with an explicit media query and grid-template-areas.