Rows4
Cols4
Gap8px
Header
Content
Sidebar
Click empty cell to add · Drag to move · Corner to resize · Double-click to rename
100% Private • No tracking100% Client-Side•No data leaves your browser•No accounts•Works offline
100% Private • No tracking100% Client-Side•No data leaves your browser•No accounts•Works offline
Build CSS grid layouts visually. Drag, resize, and place items interactively — then copy the generated HTML and CSS into your project.
CSS Grid Layout is the browser's native two-dimensional layout system. Apply display: grid to any element and its direct children become grid items — positioned across both rows and columns simultaneously. Unlike Flexbox (which handles one axis at a time), Grid gives you precise control over the entire layout surface. This tool lets you build and visualize those layouts interactively, then copy the generated HTML and CSS directly into your project.
Set these on the element with display: grid. They define the grid structure and control how all child items are placed.
displaygrid-template-columnsgrid-template-rowsgrid-template-areasgapalign-itemsjustify-itemsgrid-auto-flowSet these on individual child elements to override or extend the placement rules defined by the container.
grid-columngrid-rowgrid-areaalign-selfjustify-selforder.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-rows: auto 1fr auto;
}Header, footer, two sidebars, and main content — all defined with named areas.
.grid {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}Cards reflow automatically. No media queries needed — auto-fit handles it.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}Three equally-sized columns that share all available width via fr units.
body {
display: grid;
grid-template-rows:
auto 1fr auto;
min-height: 100vh;
}Header and footer are content-sized. Main row stretches to fill the viewport.
.layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 2rem;
}Fixed 250px sidebar beside a flexible main content column.
.gallery {
display: grid;
grid-template-columns:
repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}grid-auto-flow: dense fills gaps left by spanning items, creating a packed mosaic.
CSS Grid Layout is a two-dimensional layout system built into all modern browsers. Unlike Flexbox which handles one axis at a time, Grid lets you control both rows and columns simultaneously — making it ideal for full page layouts and complex component structures.
Use Grid when you need to control layout in two dimensions at once — page shells, dashboards, card galleries with fixed row heights. Use Flexbox for one-dimensional components — navbars, button groups, or any layout where items flow along a single axis.
fr (fraction) represents a fraction of the available free space in the grid container after fixed-size tracks are accounted for. grid-template-columns: 1fr 2fr 1fr creates three columns where the middle column gets twice as much space as the others.
grid-template-areas lets you name rectangular regions of your grid using ASCII-art-style strings. You then place items with grid-area: name — making complex layouts readable and easy to rearrange. Each string in the value represents one row.
Both fill tracks automatically based on container width. auto-fill creates empty tracks when items don't fill the row. auto-fit collapses empty tracks and distributes space to filled ones. For responsive card grids with stretch: use auto-fit; for fixed-column counts: use auto-fill.
Yes. CSS Grid has full support in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera since 2017. You can use it safely in production without prefixes. Subgrid (for nested grids) has full support as of 2023.