CSS Grid Generator with Named Areas

Drag out named grid areas and copy grid-template-areas CSS with matching HTML.

Columns (track sizes)

Rows (track sizes)

Row gap (px)

Column gap (px)

Area editor

Drag across cells to select a rectangle, or press Enter on one cell and Shift+Enter on another.

Preview

CSS

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

HTML

<div class="grid">
</div>

Use via API

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

POST https://pithlab.com/api/v1/tools/css-grid-generator

curl https://pithlab.com/api/v1/tools/css-grid-generator \
  -H "Authorization: Bearer $PITHLAB_KEY" \
  -H "Content-Type: application/json" \
  -d '{"columns":"200px 1fr","rows":"auto 1fr auto","areas":"header header\nsidebar main\nfooter footer"}'

Fields and response OpenAPI document Get an API key

About the CSS Grid Generator

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.

How to use the CSS Grid Generator

Type the column and row track sizes separated by spaces, e.g. 200px 1fr or minmax(100px, 1fr) 2fr.
Set the row and column gaps.
Drag across cells in the editor (or press Enter on one cell and Shift+Enter on another) to select a rectangle, type a name such as header, and add the area.
Check the live preview, then copy the CSS and the HTML skeleton.

Examples

Header, sidebar, main and footer

Input

columns 200px 1fr, rows auto 1fr auto, gap 16, header across the top, sidebar and main, footer across the bottom

Output

.grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Three equal columns, no areas

Input

columns 1fr 1fr 1fr, rows auto, gap 24 / 16

Output

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 24px 16px;
}

Responsive-friendly minmax columns

Input

columns minmax(150px, 1fr) 3fr, rows auto, gap 0

Output

.grid {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 3fr;
  grid-template-rows: auto;
}

Frequently asked questions

What does the fr unit mean?

fr is a share of the free space left after fixed tracks and gaps are taken out. With 200px 1fr 2fr, the first column is 200px and the other two split the rest one part to two.

Why can't areas overlap?

grid-template-areas describes each cell with exactly one name, so every named area must be a single rectangle and two areas can't share a cell. To overlap items, place them with grid-row and grid-column numbers instead.

What does minmax(150px, 1fr) do?

The track never gets narrower than 150px but grows to take its share of free space. It is the building block of responsive grids such as repeat(auto-fill, minmax(150px, 1fr)).

What are the dots in grid-template-areas?

A dot marks an empty cell that no named area covers. Items can still be placed there with line numbers.