CSS: Responsive grid columns

A short, tested CSS example for responsive grid columns. Copy it and adjust the names and paths for your project.

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}

Find it in Zest

Search for “css responsive grid columns” in Zest and this example appears above the results, with other matches to choose from. Searches stay private.

More CSS examples

Center a div Flexbox layout Media query CSS variables Truncate text with an ellipsis Sticky header Hover transition Keyframe animation

All CSS examples