CSS Grid Generator

Build CSS Grid layouts with columns, rows, gaps and named areas, and copy the HTML and CSS.

Runs in your browser. Your input is processed on your device and is not uploaded to our server.

Columns

Rows

Column size

Row size

Column gap (px)

Row gap (px)

Named areas (optional, one row per line)

CSS

HTML

How to use the CSS Grid Generator

Set the number of columns and rows and their sizes.
Adjust the gaps and optionally define named areas.
Copy the CSS and HTML.

Use fr units to share free space, minmax() for flexible tracks and repeat(auto-fit, minmax(…)) for responsive grids without media queries. Named grid-template-areas make layouts readable and easy to rearrange.

Frequently asked questions

What does 1fr mean?

One fraction of the free space remaining after fixed-size tracks and gaps.