Design / Layout

CSS Grid Generator (Visual Grid-Template-Areas Builder)

Set the columns, rows, and gap, drag across cells to make named areas such as header, sidebar, and main, and copy CSS with grid-template-columns, grid-template-rows, and grid-template-areas, ready to paste.

CSS Grid Generator (Visual Grid-Template-Areas Builder): Track sizes are written as you type them, such as 200px 1fr 1fr, and repeated sizes become repeat(). Each area becomes a name in grid-template-areas, with a dot for empty cells, and a rule that places an element with grid-area. Areas must be rectangles and cannot overlap, as CSS requires; the layout is remembered in this browser. Runs 100% locally in your browser with zero server file uploads.

Category
Developer tools
Runs
In your browser
Cost
Free · no sign-up
Availability
Ready to use
CSS grid generatorLocal processing

Runs entirely in your browser

Drag across the cells to make an area; it can span several rows and columns. Type track sizes such as 1fr, 200px, auto, or minmax(100px, 1fr).

CSS

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

.header { grid-area: header; }

.sidebar { grid-area: sidebar; }

.main { grid-area: main; }

.footer { grid-area: footer; }

Give each child element the class of its area. Cells shown as a dot stay empty.

Named areas

Each string in grid-template-areas is one row, and each word one cell: "header header" "sidebar main" puts the header across both columns. A child with grid-area: main fills every cell named main. The names do not need to match class names, but keeping them the same makes the CSS easier to read.

Common track sizes

minmax(200px, 1fr) keeps a column at least 200 px wide but lets it grow; auto fits the content; repeat(auto-fill, minmax(12rem, 1fr)) makes as many columns as fit, a pattern for card grids. Spacing can be made fluid with the CSS clamp generator.

How to use it

  1. Choose the number of columns and rows and type their sizes.
  2. Drag across cells to create areas, and rename them.
  3. Copy the CSS and give each child element its area's class.

Privacy & limitations

The layout is built in your browser.

Related tools

CSS clamp()Box ShadowCSS FormatterFlexboxClip path

Frequently asked questions

What does fr mean?

One fraction of the free space: 1fr 2fr gives the second column twice the width of the first, after fixed sizes and gaps are taken out.

Why can't areas overlap or be L-shaped?

grid-template-areas only accepts rectangles, each named once. Overlapping items are possible in CSS grid, but they need explicit line numbers instead of named areas.

How do I make it responsive?

Use the generated CSS for the wide layout, and redefine grid-template-columns and grid-template-areas inside a media query for narrow screens.

Free tool · runs in your browser · no account required