Rows4
Cols4
8px
Columns
Rows
Track sizes accept fr, px, %, rem, auto, min-content, minmax(150px, 1fr) or fit-content(300px).
Header
Content
Sidebar
free tools · most run in your browser · no signupfree developer tools/most run right in your browser/no signup needed
Build CSS grid layouts visually. Drag, resize and place items, size every track, then copy the HTML and CSS, grid-template-areas or Tailwind classes.
Track sizes accept fr, px, %, rem, auto, min-content, minmax(150px, 1fr) or fit-content(300px).
Design linear or radial gradients visually.
Open tool →Build CSS box-shadow visually.
Open tool →Convert HEX, RGB, HSL color values.
Open tool →Visually build CSS flexbox layouts.
Open tool →Create smooth SVG wave patterns.
Open tool →Resize and compress images in the browser.
Open tool →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 rows and columns (up to 12 each) and the gap. Type a size for each track: 1fr, 240px, 25%, auto, minmax(150px, 1fr) or fit-content(300px). Invalid values are highlighted and fall back to 1fr.
Click any empty cell to add an item, or start from one of nine templates such as Holy Grail, Admin Dashboard or Landing Page.
Drag an item to move it and drag its bottom-right corner to span more rows or columns. Double-click (or press Enter) to rename. With an item focused, arrow keys move it, Shift + arrows resize it and Delete removes it.
Open View Code and choose line-based CSS, grid-template-areas or Tailwind classes. Item names become valid, unique class names, and each block has its own copy button.
Set these on the element with . They define the grid structure and control how all child items are placed.
display: griddisplaygrid-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.
Set the number of rows and columns, then click an empty cell to add an item, drag items to move them and drag the bottom-right corner to resize. Type a size for each track (1fr, 200px, auto, minmax(150px, 1fr)…), adjust the gap, and open View Code to copy the HTML and CSS. Items can also be moved with the arrow keys and resized with Shift + arrow keys.
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 rows and columns simultaneously, which makes it ideal for page layouts and complex components.
Use Grid when you need to control layout in two dimensions at once: page shells, dashboards and card galleries with aligned rows. Use Flexbox for one-dimensional components such as navbars, button groups or any layout where items flow along a single axis.
fr (fraction) represents a share of the free space left in the grid container after fixed-size tracks are placed. grid-template-columns: 1fr 2fr 1fr creates three columns where the middle one gets twice as much space as the others.
grid-template-areas names rectangular regions of the grid with ASCII-art strings, one string per row. Items are then placed with grid-area: name. Choose "Template Areas" in the code panel to export your layout this way, with item names turned into area names and empty cells written as dots.
Yes. Choose "Tailwind" in the code panel to get HTML that uses grid-cols-[…], grid-rows-[…], col-[start/end] and row-[start/end] utilities. These arbitrary-value classes work in Tailwind CSS v3.0+ and v4 without any configuration.
Use flexible track sizes such as fr, minmax(200px, 1fr) or repeat(auto-fit, minmax(240px, 1fr)) so columns adapt to the container, and add a media query that changes grid-template-columns or item placement on small screens. A common pattern is a single column on mobile and the generated multi-column layout from a min-width breakpoint up.
Both create as many tracks as fit the container. auto-fill keeps empty tracks when there are not enough items to fill the row; auto-fit collapses empty tracks so the existing items stretch to fill the space.
Yes. CSS Grid has been supported without prefixes in Chrome, Firefox, Safari and Edge since 2017, and subgrid has been supported in all major browsers since 2023.