Skip to content
GreenSnippets

Responsive card grid without media queries

Use CSS Grid with repeat(auto-fit, minmax()) so cards wrap automatically at any width.

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

How it works

auto-fit creates as many columns as fit, each at least 16rem wide and sharing leftover space equally. min(100%, 16rem) prevents overflow on very narrow screens. No breakpoints are needed.

Use auto-fill instead to keep empty column tracks, so a lone card stays a fixed width rather than stretching.

This snippet has been reviewed but was not executed by an automated test. Test it in your own environment before relying on it.

Related snippets