CSS Grid Generator API

Generate CSS Grid layout code (grid-template-columns/rows, gap and named grid-template-areas) plus matching HTML.

Build CSS grid layouts visually: set column and row sizes with fr, px, auto or minmax(), drag to name areas, and copy grid-template-areas CSS and HTML.

Input

Send these as a JSON object. Unknown fields are rejected.

columns

Column track sizes separated by spaces, e.g. "200px 1fr" or "1fr minmax(200px, 2fr)". Up to 12 tracks; fr, px, %, rem, em, vw, vh, ch, auto, min-content, max-content or minmax(). (string, up to 500 characters, default "1fr 1fr 1fr")

rows

Row track sizes separated by spaces, e.g. "auto 1fr auto". Up to 12 tracks. (string, up to 500 characters, default "auto")

rowGap

Row gap in px. (number, 0 to 200, default 16)

columnGap

Column gap in px. (number, 0 to 200, default 16)

areas

Optional named areas as grid-template-areas rows, one row per line, one name per column ("." for an empty cell), e.g. "header header\nsidebar main\nfooter footer". Each name must form a rectangle. (string, up to 2000 characters)