C
CSS Grid Generator
Generate CSS Grid layouts visually with live preview and copyable code. Create grid containers, define areas, and export production-ready CSS
headersidebarmainfooter
Grid Areas Editor
Type area names in cells. Use
. for empty cells.Live Preview
header
sidebar
main
footer
CSS Output
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 1fr auto;
gap: 16px 16;
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;
}