CSS Grid Generator
Paint named areas, size the tracks and get responsive CSS grid code, HTML or Tailwind.
Breakpoints
Columns and rows
Areas
Drag across cells — or use the arrow keys, with Shift to extend — then name the selection.
Edit grid-template-areas as text
Preview
Code
About the CSS Grid Generator
Design a CSS grid without guessing the syntax. Give each column and row a size — 1fr, 240px, auto, minmax(200px, 1fr), fit-content() or repeat() — set the gaps, and paint named areas by dragging across the cells. The preview draws the real grid with your areas, at the width of the breakpoint you are editing, and shows the size every track resolves to.
Layouts are responsive: start with the mobile layout and add breakpoints (for example from 768px and 1024px), each with its own tracks and areas. The tool writes mobile-first CSS with grid-template-columns, grid-template-rows, grid-template-areas and @media rules, hides areas a breakpoint leaves out, and gives you the matching HTML — with header, nav, main, aside and footer elements where the names fit — or Tailwind classes. Presets include the holy-grail layout, sidebar layouts, a dashboard, bento grids and an auto-fit gallery.
How to use it
- Pick a preset, or start with the default. Breakpoints shows the layouts; select one to edit it, or add another with Add breakpoint.
- Under Columns and rows, type a size into each box, add or remove tracks, and set the gaps. Mistakes are explained next to the box.
- Under Areas, drag across cells (or move with the arrow keys and hold Shift to extend), type a name and select Name area. Painting over an area shrinks it; Erase clears the selection.
- Check the Preview and the resolved track sizes, then copy or download the CSS, the HTML or the Tailwind version under Code.
Examples
Base: 1 column, header / nav / main / aside / footer stacked From 768px: 200px 1fr 200px
@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";
gap: 24px;
}
}Columns: repeat(auto-fit, minmax(160px, 1fr)) · rows 200px · gap 12px
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
grid-auto-rows: 200px;
gap: 12px;
}As many 160px-or-wider columns as fit; the leftover space is shared out.
Dashboard preset: the sidebar is placed only from 1024px
@media (width < 1024px) {
.dashboard > .sidebar {
display: none;
}
}In Tailwind the sidebar gets hidden lg:block plus its line positions.
Common uses
- Laying out page shells — header, navigation, content, sidebar, footer — that rearrange on phones, tablets and desktops.
- Building bento-style feature grids and dashboards with cards of different sizes.
- Learning how fr, minmax(), auto-fit and grid-template-areas behave by changing them and watching the preview.
- Converting a CSS grid design into Tailwind classes, or the other way round.
Track sizes in brief
- fr shares out the free space:
1fr 2frgives the second column twice as much. A plain1frcannot shrink below its content;minmax(0, 1fr)can, which is why Tailwind’sgrid-cols-3uses it. - Lengths and percentages (
240px,20rem,30%) are fixed; auto, min-content and max-content follow the content. - minmax(min, max) keeps a track between two sizes; the minimum cannot be an fr value.
- repeat(3, 1fr) writes the same tracks several times. repeat(auto-fit, minmax(160px, 1fr)) makes as many columns as fit; with auto-fill, empty columns keep their space instead of collapsing. With auto-fill and auto-fit every repeated size needs a fixed minimum or maximum (CSS Grid Level 2).
Rules for named areas
In grid-template-areas every row is a quoted string with one name per column, and . marks an empty cell. Each name must cover a single filled rectangle, and every row must have the same number of cells — otherwise the browser ignores the whole declaration (CSS Grid §7.3). The painter keeps you inside these rules: when a new area covers part of an old one, the old area shrinks to its largest remaining rectangle. Areas with the auto-fill/auto-fit layout are not possible, because the number of columns is not known in advance.
How the responsive code is written
The CSS is mobile-first: the base layout applies to every width, and each breakpoint adds a @media (min-width: …) block containing only what changes. If a breakpoint leaves an area out, that element is hidden with display: none for exactly the widths where it has no place — using the media query range syntax such as @media (768px <= width < 1024px) — so it shows again wherever a layout includes it. In Tailwind, which has no utility for grid-template-areas, each element is placed with col-start-*, col-end-*, row-start-* and row-end-* classes per breakpoint, and the tracks use arbitrary values such as grid-cols-[240px_1fr]. Tailwind’s breakpoint prefixes (sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px) are used when your widths match; other widths become min-[900px]:.
Limitations
- Grid line names in [brackets], subgrid and masonry are not supported, and items are placed through named areas only.
- Hidden areas get
display: blockagain in the Tailwind version; change it toflexorgridif that element needs another display. - The preview shows each layout at its breakpoint width (375 px for the base layout), scaled to fit the page; content inside real pages can change auto and content-sized tracks.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
What is the difference between auto-fit and auto-fill?
Both create as many columns as fit. When there are fewer items than columns, auto-fit collapses the empty columns so the items stretch to fill the row, while auto-fill keeps the empty columns, leaving gaps at the end.
Why does my 1fr column overflow with long content?
Because 1fr means minmax(auto, 1fr): the column will not get narrower than its content. Use minmax(0, 1fr) to let it shrink and the content wrap or scroll.
How do I make an area span two columns?
Drag across both cells and name the selection. In the CSS that becomes the same name twice in a row, such as "header header", and in Tailwind col-start-1 col-end-3.
Can different breakpoints use different areas?
Yes. Each breakpoint has its own tracks and areas. Areas that one breakpoint leaves out are hidden there and shown wherever another layout places them.
Is the HTML accessible?
With Semantic elements on, areas named header, nav, main, aside, sidebar or footer become those elements, which screen readers use as landmarks. The elements are written in the order of the mobile layout, so the reading order and the visual order on phones match — keep that order meaningful when the desktop layout moves areas around.
Does anything get uploaded?
No. The tool runs in your browser and works offline once the page has loaded.