Skip to content
All designer tools

CSS Grid Generator

Draw the layout, name the areas, copy the grid — with the rectangle rule checked as you paint

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
htmlHTML
<div class="layout">
  <div class="header">header</div>
  <div class="sidebar">sidebar</div>
  <div class="main">main</div>
  <div class="footer">footer</div>
</div>
htmlTailwind
grid grid-cols-[240px_1fr] grid-rows-[auto_1fr_auto] gap-[16px]

Now use it on something

Every effect, block, page and template in the catalog is styled against tokens shaped exactly like these — so they take your values rather than fighting them.

Hand these tokens to an agent

npx shadcn@latest add https://hoverlab.dev/r/hoverlab.json

2
  • 1
  • 2
3
  • 1
  • 2
  • 3

Names the regions instead of counting line numbers, so a child says grid-area: sidebar and never has to know which column it landed in. Off, the grid just flows items in order.

Click to paint with main; click a painted cell again to clear it. The map follows the track counts above.

Gap16px

The gutter between tracks. Grid gaps never collapse and never appear on the outside edge, which is the whole reason this replaced margins.

One value emits the short gap: 16px. Off, you get gap: row column — the same order as every other CSS shorthand.

items moves each box inside its own cell. content moves the whole grid inside the container, and only does anything when the tracks add up to less than the space available.

Horizontally, in the cell
Vertically, in the cell
The whole grid, horizontally
The whole grid, vertically

Keep this layout. This browser remembers what you last had open. A free account remembers the ones you name, on every machine you use.

Create a free accountSign in

More designer tools

All 36 run in the tab — no account, no upload.See all