CSS Grid Template Generator
Visually design CSS Grid layouts and generate grid-template-areas code with drag and drop interface.
Grid Configuration
3
3
8px
8px
Grid Designer
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas:
". . ."
". . ."
". . .";
gap: 8px 8px;
}
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.footer {
grid-area: footer;
}<div class="grid-container"> </div>