Visual CSS Grid generator
Paint your page areas, tune columns and rows and get a responsive CSS Grid ready to copy.
Import grid-template-areas
Drag over the cells to paint a rectangular area with the selected brush.
Preview
.layout {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto auto;
grid-template-areas:
"header"
"nav"
"main"
"aside"
"footer";
gap: 16px;
}
.header {
grid-area: header;
}
.nav {
grid-area: nav;
}
.main {
grid-area: main;
}
.aside {
grid-area: aside;
}
.footer {
grid-area: footer;
}
@media (min-width: 768px) {
.layout {
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
}
}
Notes
- The CSS is mobile first: the mobile layout is the default and the desktop one goes inside @media (min-width). Without a mobile layout only one is generated.
- With "Use named areas" grid-template-areas and grid-area are generated; turn it off to get line-based placement (grid-column and grid-row).
- Tailwind v4 has no classes for grid-template-areas, so arbitrary properties and the min-[Npx] variant are used.
- Grid visual order does not change HTML order: keep a logical order for screen readers.
Built by
Miguel Ángel Colorado Marin (MACM)
Built by
Miguel Ángel Colorado Marin (MACM)
Full-Stack Developer · Guadalajara, España
I develop web apps, digital tools and full projects — from design to deployment.
grid-template-areas is the most readable way to describe a layout, but writing the strings by hand is error-prone: one extra cell, an L-shaped area or a repeated name invalidates the whole rule without the browser telling you. This generator lets you draw the design directly by painting cells, checks that every area is a rectangle and shows the real result with CSS Grid. You can add a second layout for mobile, choose between named areas and line-based placement and export it as mobile-first CSS or Tailwind classes.
Features
- ✓Paint named areas by dragging over the grid
- ✓Columns and rows with fr, px, %, auto, min-content, minmax() or fit-content() and live validation
- ✓Automatic columns with repeat(auto-fit, minmax()) for self-adapting grids
- ✓Optional mobile layout with configurable breakpoint and mobile-first CSS
- ✓Detects non-rectangular areas, invalid names and areas missing from a layout
- ✓Output with grid-template-areas or line-based placement, and repeat() compression
- ✓Exports CSS, HTML and Tailwind v4 classes with arbitrary properties
- ✓Templates: holy grail, dashboard, article with sidebar and gallery
How do I create a CSS Grid layout?
- 1
Define columns and rows
Add tracks and size them with fr, px, auto or minmax(), or start from a template.
- 2
Paint the areas
Pick or create an area name and drag over the cells it should cover.
- 3
Add the mobile layout
Optionally create a small-screen version and choose the breakpoint.
- 4
Copy the code
Choose CSS, HTML or Tailwind and copy the result.
Frequently asked questions
What is grid-template-areas?
A property that describes the layout with strings, one per row, where each word is the name of the area filling that cell and a dot marks an empty cell. Each element is then placed with grid-area: name.
Why doesn't my grid-template-areas work?
The usual causes are an area that is not a rectangle, rows with different cell counts or a column count that does not match grid-template-columns. If there is an error, browsers ignore the whole declaration. The generator detects those cases.
What does repeat(auto-fit, minmax(200px, 1fr)) do?
It creates as many columns of at least 200px as fit and shares the leftover space among them. It is the way to build responsive card grids without media queries.
What does fr mean?
It is a fraction of the container's free space. With columns 1fr 2fr, the second gets twice as much remaining space as the first, after gaps and fixed-size tracks are subtracted.
Why is the CSS mobile first?
Because the simplest layout, the mobile one, becomes the base and the desktop layout is added with @media (min-width). Phones apply fewer rules and it is the same approach Tailwind uses.
Related tools
Embed CSS Grid Generator on your site
Add CSS Grid Generator to any web page with a simple iframe. Free, with attribution to miguelacm.es.
<iframe
src="https://miguelacm.es/embed/css-grid-generator"
width="100%"
height="700"
frameborder="0"
title="CSS Grid Generator — miguelacm.es"
></iframe>