What Grid properties can I set?

Number of columns and rows, column and row sizes, and gap. See a live preview of the grid layout.

CSS Grid Generator

Visual CSS Grid layout builder. Create complex grid layouts with an interactive tool.

How to use: Set rows, columns, and gaps visually — copy the generated CSS Grid code.

Columns

Rows

Gap (px)

Column Size

Row Size

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, auto);
gap: 10px;

Set grid columns, rows, sizes, and gap to build a CSS Grid layout visually. Copy the generated CSS for your stylesheet.

What Grid properties can I set?: Number of columns and rows, column and row sizes, and gap. See a live preview of the grid layout.