CSS Grid Generator

NEW

Design a CSS grid layout visually and copy the generated code.

Columns: 3

Rows: 3

Column Gap: 16px

Row Gap: 16px

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

How to use CSS Grid Generator

Set the number of columns and rows.
Adjust the column and row gap.
Copy the generated grid-template-columns, grid-template-rows and gap CSS.

→ build a one-dimensional layout with flexbox instead

Frequently asked questions

What does the generated CSS control?

It outputs a `.container` rule with `display: grid`, equal-width `grid-template-columns`/`grid-template-rows` for your chosen counts, and separate column/row gap values.

How many columns and rows can I set?

Between 1 and 12 for each, using the sliders — the preview grid updates live so you can see the layout before copying the CSS.

Can I set different gaps for columns and rows?

Yes, column gap and row gap are controlled by separate sliders (0–64px each), so your grid doesn't have to use uniform spacing.

Community

Related tools

NEW

CSS Gradient Generator

Create beautiful CSS linear and radial gradients visually.

NEW

Box Shadow Generator

Generate CSS box-shadow values with live preview.

NEW

Border Radius Generator

Generate CSS border-radius values for any shape.

NEW

CSS Button Generator

Design and generate CSS buttons visually with live preview.