CSS Grid Generator

Q: How do I make an item span the full width?

Set grid-column to `1 / -1`; -1 refers to the last grid line.

Build CSS Grid layouts visually: grid-template-columns/rows, named areas with validation, gaps, alignment and per-item placement. Copy clean CSS.

Presets

Container

grid-template-columns

grid-template-rows

grid-template-areas

One line per row, names separated by spaces, a dot (.) for an empty cell. Each name must form a rectangle.

column-gappx

row-gappx

justify-items

align-items

Number of items

Item 1

Select an item here or click it in the preview.

grid-column

grid-row

grid-area

Examples: 1 / 3, span 2, 2 / -1. An area name overrides line placement.

Preview

Drag the bottom corner of the preview to resize the container.

CSS code

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Related Tools

View All

CSS Box Shadow Generator CSS Gradient Generator CSS Flexbox Generator Border Radius Generator Glassmorphism Generator Neumorphism Generator Text Shadow Generator CSS Animation Generator

What is CSS Grid Generator?

A CSS Grid layout builder where you type any track template (for example repeat(auto-fill, minmax(120px, 1fr))), draw named areas, set gaps and alignment and place individual items by line numbers, spans or area names. The live preview uses the generated CSS.

How to use CSS Grid Generator

Start from a preset (3 columns, Responsive cards, Holy grail layout, Sidebar, Bento) or type grid-template-columns and grid-template-rows.
Optionally write grid-template-areas: one line per row, names separated by spaces, a dot for an empty cell.
Set row-gap, column-gap, justify-items, align-items and the Number of items.
Select an item and set grid-column, grid-row (e.g. 1 / 3, span 2) or pick a grid-area.
Copy the CSS code.

Example

Input

grid-template-columns 200px 1fr, row-gap 8px, column-gap 16px; item 2: grid-column 1 / 3, grid-row span 2

Output

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 16px;
}

.item-2 {
  grid-column: 1 / 3;
  grid-row: span 2;
}

When to use CSS Grid Generator

Use grid for two-dimensional layouts: page skeletons, dashboards, galleries and card grids. For a single row or column of items that should size by content, flexbox is often simpler (see the CSS Flexbox Generator).

How CSS Grid Generator works

Templates and placement values are checked with the browser's own CSS.supports(), so anything valid in CSS is accepted and invalid values are flagged. The areas text is validated: every row needs the same number of cells and each name must form a single rectangle. Output contains display: grid, the templates, grid-template-areas with one quoted string per row, gap (one value if row and column gaps are equal, row column otherwise) and alignment only when not stretch. Items get grid-area or grid-column/grid-row rules only when set.

Common Use Cases

Page skeletons with header, sidebar, main and footer
Responsive card galleries with auto-fill and minmax()
Bento-style dashboards with spanning tiles
Magazine layouts with named areas
Form layouts with label and input columns

FAQs

Why does it say my area is not a rectangle?

In grid-template-areas each name must occupy a rectangular block of cells. L-shapes or names split into separate places are invalid CSS and the whole property would be ignored.