CSS Grid Generator

Describe your columns and rows with any CSS track list, add gaps, and optionally draw the layout as named areas in plain text, one row per line. The generator checks that every area is a rectangle and that each row has the same number of cells, previews the real grid, and writes the container CSS plus one grid-area rule per named region.

CSS & Frontend Runs in your browser

Build a CSS Grid Layout

JavaScript is required. This tool runs in your browser, so please enable JavaScript to use it. The instructions below are still available.

grid-template-columnsAny track list: 1fr 2fr, repeat(3, 1fr), minmax(200px, 1fr) auto …

grid-template-rows

Column gap

Row gap

Preview height

grid-template-areas (optional), one row per lineUse one name per cell and a dot (.) for an empty cell. Each name must form a rectangle. Leave empty for a plain numbered grid.

justify-items

align-items

How to Use the CSS Grid Generator

Type the column and row track sizes, for example 220px 1fr 1fr.
Set the column and row gaps.
Optionally type the area map: one line per row, one name per cell.
Check the preview and the Checks list, then copy the CSS.

About This Tool

Front-end developers sketching page layouts, dashboards and card grids, and learners who want to see how fr, minmax() and template areas behave.

Input: Track sizes and area names · Output: CSS.

Features and Limitations

Features

Validates track lists with your browser's own CSS parser.
Explains area mistakes: ragged rows, non-rectangular areas and invalid names.
Writes a grid-area rule for every named region.
Without areas, numbers each cell so you can see auto-placement.

Limitations

Each named area is previewed with a short label only; real content can change auto and min-content track sizes.
Subgrid, masonry and line names in brackets are not generated (you can still type line names into the track lists).
Results are computed in your browser; nothing you enter is sent to a server.

Example

Columns 220px 1fr 1fr with the areas “header header header / sidebar main main / footer footer footer” produce a full-width header and footer, a 220 px sidebar and a main region spanning two columns.

Frequently Asked Questions

What does the fr unit do?

fr shares out the free space left after fixed tracks and gaps. 1fr 2fr gives the second column twice the leftover space of the first.

Why is my grid-template-areas value invalid?

Every row must have the same number of cells, and each name must cover a single rectangle. An L-shaped or split area makes the whole declaration invalid, so the browser ignores it.

How do I leave a cell empty?

Use a dot (.) or several dots together (...) in that position of the area map.

How do I make the layout responsive?

Use flexible tracks such as repeat(auto-fit, minmax(200px, 1fr)), or redefine grid-template-areas inside a media query for small screens.