CSS Grid Generator - Auto-Fit Minmax Layout Preview

This CSS Grid Generator outputs responsive auto-fit minmax() layouts from two inputs: minimum card width and gap. Drag the container slider to watch cards wrap, see the estimated column count, and copy a production-ready CSS block instantly.

Grid settings

Live grid preview

Cards wrap with auto-fit minmax() as the container narrows.

960px wide
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6

Generated CSS

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

Columns at 960px: 3

display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px;

Column estimate reference

Estimated columns use floor((container + gap) / (minCard + gap)) . Actual rendering may differ slightly when fractional tracks interact with scrollbar width, but the preview matches modern browser grid behavior.

Container Min card Gap Columns
960px 240px 16px 3
768px 240px 16px 3
500px 240px 16px 2
360px 240px 16px 1

When to use auto-fit minmax() grids

Marketing grids, product cards, dashboard tiles, and blog indexes share one requirement: columns should reflow without a breakpoint spreadsheet. repeat(auto-fit, minmax(MINpx, 1fr)) delivers that pattern from two numbers-minimum track width and gap-while the browser handles column count.

  • Good fit: equal-width cards, icon grids, pricing tables, and gallery layouts that stretch to fill the row.
  • Less ideal: irregular masonry, tightly packed toolbars, or rows where each item needs a unique width-Flexbox or explicit grid areas may work better.

Sample output

Default settings (240px minimum card, 16px gap) produce this copy-ready block. Rename the selector to match your component. 

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

CSS Grid FAQ

What does repeat(auto-fit, minmax()) do?

It creates a responsive grid that fits as many columns as possible while each column stays at least your minimum width and grows to fill leftover space. When the container narrows, columns wrap to new rows automatically-no media queries required for the column count.

How do you calculate how many columns fit?

A practical estimate is floor((containerWidth + gap) / (minCardWidth + gap)). For a 960px container, 240px minimum cards, and 16px gap: (960 + 16) / (240 + 16) ≈ 3.81, so about three columns fit. The live preview shows the same wrapping behavior in the browser.

Should I use auto-fit or auto-fill?

auto-fit collapses empty tracks so leftover space flows into existing columns-great for card galleries and product grids. auto-fill keeps empty tracks, which can preserve alignment when items are sparse. This generator uses auto-fit because it is the common choice for responsive card layouts.

CSS Grid vs Flexbox for card layouts: which wins?

Flexbox excels at one-dimensional rows or columns with content-driven sizing. CSS Grid with auto-fit minmax() excels when you want equal-width columns that reflow by container width without manual breakpoints. Use this tool when you need a uniform card matrix that wraps predictably.

What min card width should I pick?

Choose the narrowest width where your card content still looks intentional-often 220px to 280px for text cards or 160px for icon tiles. Pair it with a gap that matches your spacing scale (8px, 12px, or 16px). Preview at phone and desktop container widths before copying CSS.

Can I paste the output into Tailwind or a CSS module?

Yes. The copied block is plain CSS with display: grid, grid-template-columns, and gap. Paste it into a component class, a CSS module, or a @layer utilities block. Adjust the selector from .responsive-grid to match your markup.

Sources & review

Last reviewed:

Related Dev Tools

Calculator hubs

Related guides