CSS Grid Generator

Build a grid that reflows on its own, with no media queries.

What you provide

Result

Responsive grid from 240px columns

This layout reflows on its own, with no media queries at all. The minmax with a min() inside is the part worth keeping: without it, a column with a 240px minimum overflows any viewport narrower than that, which is exactly what happens on a small phone. As for the fit mode, auto-fit collapses empty tracks so two items stretch across the full width, while auto-fill keeps them so two items stay narrow at the left. Neither is correct in general, and the difference only shows when there are fewer items than columns.

CSS
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 16px;
}
Diagnostic telemetry
Layout
Responsive, no media queries
Minimum column width
240px
Fit modeEmpty tracks collapse, so few items stretch to fill
auto-fit
Columns at 1280px
5
Gap
16px
Vertical alignment
stretch

What this cannot tell you

  • Generates CSS from your settings, in your browser. It does not modify anything on your site.
  • The column count shown at a given width assumes the grid fills that width. Inside a narrower container it will produce fewer columns, which is the intended behaviour.

Take this with you

CSS Grid Generator on RunTheTests — free browser-based frontend tools, no sign-up.