CSS Grid Generator

Create named CSS Grid areas on a visual map, preview the rendered layout, and copy matching CSS and HTML locally.

01 / Layout map

Shape the layout

3 × 3

Drag across empty cells to add an area. Drag an area to move it, or drag its bottom-right ↘ handle to resize it. For keyboard editing, select an area and use the fields below. This map uses equal cells; the preview shows actual CSS.

02 / Tracks

Tracks & gaps

ColumnsRows

Column sizes

Column 1

Column 2

Column 3

Row sizes

Row 1

Row 2

Row 3

Column gap (px)Row gap (px)

Tracks support up to 2000px or 0.1–12fr. minmax(0, fr) can allow content to shrink; check overflow in your own layout.

03 / Areas

Edit areas

4 / 16

04 / Rendered preview

See the rendered grid

Preview container width: 480px

headerSample content

sidebarSample content

mainSample content

footerSample content

This changes only the preview container, not a media query. Card styling helps identify areas; row heights still depend on your content.

05 / Copyable output

Bring it into your project

CSS

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 12px 12px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}
.layout > .header { grid-area: header; }
.layout > .sidebar { grid-area: sidebar; }
.layout > .main { grid-area: main; }
.layout > .footer { grid-area: footer; }

HTML

<div class="layout">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="main">main</div>
  <div class="footer">footer</div>
</div>

HTML reading order

header
sidebar
main
footer

HTML follows the visual top-to-bottom, left-to-right order. Check semantics, reading order and Tab order with your real content. Editing stays on this browser page.

How to use this tool

Choose a starter or empty grid, select two cells to add a rectangular area, then drag an area to move it or drag its corner handle to resize it. Use the fields for precise keyboard editing. Compare the rendered preview with the CSS and HTML before copying.

When not to use it

This creates one grid without responsive breakpoints. A visual position does not establish semantic reading or keyboard order. Test the copied layout with real content, zoom and narrower screens.

For one-dimensional layouts, try the Flexbox generator

Read the guide →