CSS Grid Generator

CSS Grid lays out a page in rows and columns at the same time. This generator writes the container rule from your column and row templates (repeat(), fr, minmax(), auto-fill), gaps and alignment, turns a simple text sketch of named areas into grid-template-areas plus one grid-area rule per region, and gives the matching HTML. It checks the syntax first — unknown track sizes, rows of different length and areas that are not rectangles are reported instead of silently ignored — and renders the layout in your own browser.

How to use this tool

1. Enter the column template, for example repeat(3, 1fr) or 200px 1fr.
2. Optionally enter rows and sketch named areas, one row per line.
3. Set the row and column gaps and the item alignment.
4. Copy the CSS and HTML; the preview shows the layout your browser computes.

Formula

display: grid; grid-template-columns: <tracks>; grid-template-rows: <tracks>; grid-template-areas: "a a" "b c"; gap: <row> <column>;

A track is a length (200px), a flexible fraction (1fr), auto, min-content, max-content, minmax(min, max) or fit-content(). In grid-template-areas every row needs the same number of cells and each name must cover a rectangle; "." leaves a cell empty.

Example

Columns 200px 1fr, rows auto 1fr auto and the areas "header header / sidebar main / footer footer" give a classic page layout: 2 columns × 3 rows, with gap: 16px 24px for 16 px between rows and 24 px between columns, and rules such as .header { grid-area: header; }. The default repeat(3, 1fr) with 6 items gives 3 equal columns × 2 rows.