CSS Grid Generator

Visual CSS Grid builder — set columns, rows, gaps, and cell spans, then copy the CSS.

1
2
3
4
5
6
7
8
9
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 8px;
}

Frequently Asked Questions

CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns simultaneously, making complex layouts straightforward without hacks or workarounds.
The fr unit represents a fraction of the available space in the grid container. For example, grid-template-columns: 1fr 2fr creates two columns where the second is twice as wide as the first.
Use grid-column and grid-row properties. For example, grid-column: 1 / 3 makes a cell span from column line 1 to column line 3 (two columns). In this tool, click a cell and adjust its start/end values.
gap is a shorthand that sets both column-gap and row-gap at once. Use column-gap and row-gap independently when you want different spacing horizontally and vertically.