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

What is CSS Grid?

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.

What does 1fr mean in CSS Grid?

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.

How do I span a cell across multiple columns or rows?

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.

What is the difference between gap, column-gap, and row-gap?

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.