CSS Grid Layout Generator
Design a CSS grid visually, watch the live preview, then copy the clean CSS and HTML skeleton.
Columns and rows
Alignment
Demo items
The demo items only appear in the preview below. The exported HTML skeleton uses placeholder item divs you can replace.
Live preview
updates as you change settingsGenerated CSS
HTML skeleton
Property legend
| Property | What it does |
|---|---|
| display: grid | Turns the container into a grid layout container. |
| grid-template-columns | Defines the width of each column. 1fr means one share of the free space. |
| grid-template-rows | Defines the height of each row. |
| gap | Space between rows and columns, written as row gap then column gap. |
| justify-items | Aligns each item left, center, right, or stretched inside its own cell. |
| align-items | Aligns each item top, middle, bottom, or stretched inside its own cell. |
| justify-content | Aligns the whole grid horizontally inside the container when there is extra space. |
| align-content | Aligns the whole grid vertically inside the container when there is extra space. |