Visual editor for creating grid-template-columns and rows
Loading page
This may take a few seconds.
Loading page
This may take a few seconds.
If reChecker is not working correctly, describe the problem and the page where it happened. Leave an email or phone number; we will reply after checking.
CSS Grid Markup Generator
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
height: 400px;
}
.header {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
.sidebar {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.main {
grid-column: 2 / 4;
grid-row: 2 / 3;
}
.footer {
grid-column: 1 / 4;
grid-row: 3 / 4;
}CSS Grid Generator lets you create two-dimensional grids visually. Set the number of columns and rows, adjust the gap, alignment, and areas — then get ready-to-copy CSS code.
Visual editor for creating grid-template-columns and rows
Configure gap, justify, and align
Detecting grid areas
Export valid CSS
Grid works well for two-dimensional layouts: pages with a sidebar and content, card grids, and complex forms. Flexbox is better for one-dimensional tasks: navigation, centering, and arranging items in a row. They’re often combined: Grid for the overall layout, Flexbox inside cells.