Neatbo.

CSS grid generator

Generate a card grid that adapts to container width, with a narrow preview and copyable CSS.

Browser-local processingInputGrid optionsOutputCSS
  1. 1Add input
  2. 2Adjust settings
  3. 3Get your result

Tool input and files are processed in this browser without being uploaded.

Your input

Inputs are kept temporarily in this tab when switching tools. Refreshing or closing clears them; large results may need to be regenerated.

⌘ / Ctrl + Enter to run

Set a minimum card width and gap. Columns fit automatically within their container; the item count changes only the preview.

Ready: 4 preview cards with a 220px minimum when space allows.
Preparing the tool…

Before you start

Choose a minimum card width and gap. Preview content in a narrow container and in the available page width, then copy CSS that fits equal columns automatically.

How to use this tool

  1. Enter the minimum card width, gap and preview card count.
  2. Compare the 280px sample with the available-width sample using actual content-sized cards.
  3. Generate the CSS, copy or download it, then test it inside the target container.

Supported inputs and limits

Minimum card width 120–600px; gap 0–64px. Preview card count 1–12 changes only the sample, not the CSS.

auto-fit expands remaining cards and creates rows from content. Test long unbroken content and the final container.

CSS is generated in this browser. No account needed.

Worked example

Example input

Example options
{"minWidth":220,"gap":16,"items":4}
Example output
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}
.grid > * {
  min-width: 0;
}
When something does not work
Correct invalid numeric inputs, then test the copied CSS with your real cards and container.
Frequently asked questions
Does this grid need a viewport breakpoint?
No. auto-fit chooses equal columns from the container width. The min(100%, width) minimum lets a single column shrink inside a narrower container.
Do preview cards set a fixed row count?
No. The item count only populates the preview. Rows follow the content, and auto-fit collapses unused columns.
Can long content still overflow?
Yes. The CSS sets min-width: 0 for direct children, but an unbroken word or fixed-size child may need a wrapping or sizing rule in the target component.
Documentation & further reading
Color and CSS guide: contrast, gradients and responsive styles →Image and CSS checks: dimensions, color, contrast and layout →
Related tools