All tools

CSS Grid Generator

Build a CSS grid layout visually.

1
2
3
4
5
6
CSS
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 8px;

About

Set rows and columns, drop items into cells, drag to span. Get the CSS for grid-template-columns, grid-template-rows, gap, and area placements. Saves you from grid syntax memorization.

How to use

  1. Set columns and rows.
  2. Click cells to add items, drag to span.
  3. Copy the generated CSS.

FAQ

What's the difference between fr and percent?+

fr (fraction) splits remaining space proportionally. Percent is fixed. With 1fr 1fr, columns split evenly. With 50% 50%, they're 50% of the container minus gap. Different math, different result.

Should I use grid-template-areas?+

Yes for layouts where the structure matters. It makes the CSS readable. For dynamic content, line-based placement is more flexible.