How do I create a CSS grid?

Set display: grid on a container, then define grid-template-columns and grid-template-rows. Use the sliders above to build it visually and copy the generated CSS.

What does the fr unit mean?

A fraction of the remaining free space. repeat(3, 1fr) makes three equal columns that divide the available width between them.

How do I make a responsive grid without media queries?

Use repeat(auto-fit, minmax(200px, 1fr)) as your column track — columns wrap automatically as the container narrows.

What is the difference between gap, column-gap and row-gap?

gap is shorthand for both. column-gap spaces columns horizontally, row-gap spaces rows vertically. This tool sets each independently.

Grid or Flexbox — which should I use?

Grid for two-dimensional layouts where rows and columns both matter. Flexbox for one-dimensional rows or columns of content that should flow.

Can I copy the layout as Tailwind classes?

Yes. The Tailwind block gives you the equivalent grid-cols and gap utilities alongside the plain CSS.

Is CSS Grid supported in all browsers?

Yes. Every current browser, including mobile Safari and Chrome for Android, supports CSS Grid — no fallback is needed.

Does this tool send anything to a server?

No. The preview and generated code are produced entirely in your browser.

MyToolsBag

Search All Tools

CSS Grid Generator

Build a CSS grid visually — set columns, rows and gaps, preview it live, and copy the CSS or Tailwind classes.

Columns: 3Rows: 2Column gap: 16pxRow gap: 16pxColumn track sizeRow track size

Live preview

CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 120px);
  column-gap: 16px;
  row-gap: 16px;
}

Tailwind classes

grid grid-cols-3 gap-x-[16px] gap-y-[16px]

CSS Grid is the layout system for two-dimensional layouts — rows and columns at the same time — and the fastest way to learn it is to change a value and watch the boxes move. This generator gives you column and row counts, per-axis gaps and track sizing, with a live preview above the generated code.

The important unit is fr, the fraction. repeat(3, 1fr) creates three equal columns that share the free space, which is what you want most of the time. Fixed units (px, rem) lock a track to a size, auto sizes it to its content, and minmax(200px, 1fr) gives a floor with flexibility above it. For responsive grids without media queries, try repeat(auto-fit, minmax(200px, 1fr)).

Copy the output as plain CSS for a stylesheet, or as Tailwind utility classes if you are working in a utility-first project. CSS Grid is supported by every current browser, so nothing here needs a fallback. The tool runs entirely in your browser.

CSS Grid Generator

Live preview

CSS

Tailwind classes

Frequently asked questions

Related tools