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.
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
gap: 16px;
}- 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
How this calculation works
The responsive mode uses repeat with auto-fit or auto-fill and a minmax track, which lets the browser work out how many columns fit and reflow without a single media query. The minimum width is wrapped in a min() so it can never exceed the available space, which is what stops a 240px column overflowing a 320px phone. Fixed mode produces an equal-width grid of the column count you choose.
What the results mean
- auto-fit against auto-fill
- They differ only when there are fewer items than columns. auto-fit collapses the empty tracks so items stretch to fill the row; auto-fill keeps them so items stay at their minimum width.
- Minimum column width
- The narrowest a column may get before the grid drops to fewer columns. It sets your breakpoints implicitly, which is why the layout needs no media queries.
- Gap
- Space between tracks only, never at the outer edges. That is what makes it easier to reason about than margins on children.
Common problems and fixes
- The grid overflows on a small phone
- A bare minmax with a fixed minimum cannot shrink below that minimum, so a 300px column will overflow a 320px viewport once padding is counted. Wrapping the minimum in min() as this generator does solves it: the track takes the smaller of your minimum and the full available width.
- Two items stretch across the whole row and look wrong
- That is auto-fit doing its job. Switch to auto-fill and the empty tracks are kept, so the two items stay at their natural width on the left. Which one you want depends on the design, and the difference is invisible whenever the grid is full.
Frequently asked questions
Grid or flexbox?
Grid when you are laying out in two dimensions and want tracks to line up across rows, which is most card and gallery layouts. Flexbox when content should size itself along one axis, which suits toolbars, button rows and anything where items have naturally different widths. Using both on the same page is normal.
How do I make one item span two columns?
Set grid-column: span 2 on that item. It stays inside the same auto-generated tracks, so the rest of the layout is unaffected. Worth checking what happens at the narrowest width, since an item spanning two columns in a single-column layout simply spans the one.
Do I still need media queries?
Far fewer. A responsive grid handles the column count on its own, so the remaining queries tend to be for genuine design changes rather than for arithmetic, such as switching a sidebar from beside the content to above it.
Put this on your own site
Free to embed, no attribution required beyond the source link the frame carries itself. It runs entirely in your visitor's browser, sets no cookies and loads no third-party script.
<iframe src="https://runthetests.com/embed/css-grid-generator/" width="100%" height="560" style="border:1px solid #e5e5e5;border-radius:8px" title="CSS Grid Generator" loading="lazy"></iframe>
Preview it at https://runthetests.com/embed/css-grid-generator/. Embedded pages are marked noindex, so yours stays the canonical copy — not this one.