fr is a fraction of the free space in the grid container. Three 1fr columns share the width equally.

Use grid for two-dimensional layouts (rows and columns together) and flexbox for a single row or column.

Can I copy the generated CSS?

Yes. Click Copy CSS to put the code on your clipboard, or Download CSS to save a .css file. You can also edit the code by hand before copying.

Is anything uploaded to a server?

No. The CSS is generated in your browser from the settings you choose. The tool keeps working offline once the page has loaded.

Yes. The page address updates as you change settings, so the Share button copies a link that restores your exact configuration.

Define columns and rows, choose track sizes like 1fr or minmax(), set gaps and instantly see the grid your CSS will produce.

Last updated: 2026-07-21 · Runs 100% in your browser

// controls

Presets

Columns3

Rows3

Column size

Row size

Column gap12px

Row gap12px

Live preview

Generated CSS

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

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

01Adjust the controls on the left or pick a preset to start the CSS Grid Generator.
02Watch the live preview update instantly as you change each setting.
03Fine-tune the generated CSS by hand in the code panel if you like.
04Click Copy CSS or Download CSS, or Share to send a link to your design.