CSS Grid Visualizer
Build CSS Grid layouts visually. Define columns and rows with fr, px, or minmax() units. Drag items to assign grid areas, toggle auto-fit vs auto-fill, and generate template-areas code — all with live CSS output.
Live Preview
Generated CSS
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"header header header"
"sidebar main main";
gap: 16px;
}
.header {
grid-area: header;
}
.sidebar {
grid-area: sidebar;
}
.main {
grid-area: main;
}Template Areas
grid-template-areas: "header header header" "sidebar main main";
Frequently Asked Questions
What is the difference between auto-fit and auto-fill?
Both auto-fit and auto-fill create as many tracks as fit. The difference appears when items don't fill the full row: auto-fill keeps empty tracks (maintaining gaps); auto-fit collapses them so items expand to fill available space.
What does fr mean?
The fr (fractional) unit represents a fraction of the available space after fixed-size tracks are placed. '1fr 2fr' creates two tracks where the second is twice as wide as the first.
How do I use minmax()?
minmax(min, max) sets a track's size range. minmax(100px, 1fr) means 'at least 100px but grow to fill available space'. It's perfect for responsive grids.