/

CSS Grid Generator

Processed Client Side

Set columns, rows, and gaps with fr, px, or auto tracks, preview the grid live, and copy ready-to-use grid-template CSS.

Grid options
Columns
3
Column tracks (e.g. 1fr, 200px, auto, minmax(0,1fr))
Rows
2
Row tracks
Column gap12px
Row gap12px
Preview & CSS
3×2
1
2
3
4
5
6
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 12px;
}

Bookmark this tool now — skip the search next time you need it.

About CSS Grid Generator

This tool runs entirely in your browser. Whatever you paste is processed on your own device and is never uploaded, logged, or sent to any server.

Lay out a CSS Grid visually by defining your columns, rows, and gaps, then copy the grid-template CSS. Track sizes can mix freely — fr units that divide the leftover space, fixed pixel tracks for sidebars that must not move, and auto tracks that size to their content — which is exactly the combination that makes Grid able to express layouts Flexbox cannot. The preview redraws as you add or resize tracks, so you can see how the fractions actually resolve rather than working it out on paper. Each track is a free text field rather than a fixed menu, so anything CSS accepts goes in it — including minmax() and repeat() — and the generated rule arrives complete with display: grid and both gap properties.

Key features

  • Add and remove columns and rows freely
  • Mix track types: fr for proportional space, px for fixed tracks, and auto for content sizing
  • Independent column gap and row gap
  • Live preview showing exactly how the tracks resolve
  • Generates a complete rule — display: grid, both templates, and column-gap and row-gap — not just a fragment to assemble yourself
  • Track fields accept any valid CSS track value, so minmax(), repeat(), fit-content(), and percentages all work
  • Up to eight columns and eight rows, with the preview filling every cell so the resolved geometry is visible at a glance
  • Genuinely two-dimensional, so rows and columns are controlled together
  • Copy-ready output
  • Runs entirely in your browser

How to use it

  1. Add the number of columns you need and set each track size.
  2. Do the same for rows.
  3. Set the column and row gaps.
  4. Read the preview to check the proportions, then copy the CSS.

Tips & common mistakes

  • The fr unit divides the space left over after fixed tracks and gaps are subtracted. That is why a 1fr track next to a 200px sidebar behaves predictably at every viewport width.
  • Grid is two-dimensional and Flexbox is one-dimensional. Reach for Grid whenever you need to align things across both rows and columns at once.
  • repeat(auto-fill, minmax(220px, 1fr)) is the responsive card grid idiom — it fits as many columns as will hold 220px and stretches them to fill, with no media queries at all.
  • Use gap rather than margins. Grid gap applies only between tracks, so there is no stray edge spacing to strip off afterwards.
  • A fixed px track ignores its content and will overflow if the content is wider. Use minmax() when a track needs a floor but must still be allowed to grow.
  • Naming grid areas with grid-template-areas makes complex layouts far more readable than line numbers, and it is worth switching to once a layout has more than a few regions.
  • A 1fr track has an automatic minimum size of auto, so a long unbreakable string can push it wider than its share. Writing minmax(0, 1fr) instead is the standard fix for a grid child that refuses to shrink.
  • Gaps count against the space fr units divide up, which is why adding a gap makes every proportional track narrower rather than overflowing the container.
  • For one-dimensional layouts — a single row or column of items — the Flexbox Playground is the simpler tool.

Related tools

Browse all 19 Frontend / CSS tools

Frequently asked questions

9

Set the number of columns and rows, edit each track value (like 1fr, 200px, or auto), and adjust the gaps. The grid renders live and the grid-template CSS is ready to copy.

fr is a fractional unit that distributes leftover space. Columns of 1fr 2fr split available width so the second is twice as wide as the first.

Yes — each track is editable independently, so you can combine values like 200px 1fr auto to mix fixed, flexible, and content-sized columns.

Grid is two-dimensional (rows and columns together), ideal for page and card layouts, while Flexbox is one-dimensional (a single row or column). Use the Flexbox Playground for the latter.

It divides the space left over after fixed tracks and gaps are subtracted. That is why 1fr beside a 200px sidebar behaves predictably at every viewport width.

Use repeat(auto-fill, minmax(220px, 1fr)). It fits as many columns as will hold 220px and stretches them to fill the row, adapting on its own.

A px track ignores its content and will not grow. Use minmax() when a track needs a minimum size but must still be allowed to expand.

Once a layout has more than a few regions, yes. Naming areas is far more readable than line numbers and makes the layout obvious from the CSS alone.

Yes, and you usually should. Grid for the page-level two-dimensional structure, Flexbox for one-dimensional arrangement inside individual cells.