Build grid layouts visually with a live preview. Configure columns, rows, gaps, and alignment properties. Span cells across multiple tracks. Load preset layouts or build from scratch. Copy CSS or Tailwind with one click.
Click a cell in the preview to select it and set column/row spans.
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
}Defines the track sizes. Use fr units for flexible fractions, px for fixed sizes, auto for content-based sizing, or minmax(min, max) for a size range. Use repeat(n, size) to repeat tracks.
Sets the gutter spacing between grid tracks. The gap shorthand sets both row and column gaps. Unlike margins, gaps only apply between items, not at the edges.
justify-items aligns items along the inline (row) axis within their grid cell. align-items aligns items along the block (column) axis. Both default to stretch.
Controls how the entire grid is positioned within its container when the grid is smaller than the container. Useful when tracks use fixed sizes and there is leftover space.
Makes an item span multiple columns or rows. Use span N to span N tracks, or explicit line numbers like 1 / 3 to start at line 1 and end at line 3.
The fr (fraction) unit distributes available space proportionally. 1fr 2fr gives the second column twice the space of the first. Fixed-size tracks are allocated first, then fr units divide the remainder.
A grid layout divides a page or component into rows and columns, creating a structured framework for placing content. CSS Grid Layout is the native browser implementation of this concept. By setting display: grid on a container element, you create a grid context where child elements are automatically placed into cells defined by your column and row tracks.
Grid layouts are the backbone of modern web design. They power everything from simple two-column article layouts to complex dashboard interfaces with resizable panels. CSS Grid has 97.5% global browser support, making it safe for production use. Grid was first supported in Chrome 57 in March 2017 and has been universally available across browsers since late 2017.
Step 1: Choose a starting point. Load one of the five preset layouts (Holy Grail, Two Column, Three Column, Card Grid, Dashboard) or start with the default 3x3 grid.
Step 2: Configure tracks. Add or remove columns and rows with the +/- buttons. Type a size value for each track using fr, px, auto, or minmax() units.
Step 3: Adjust spacing and alignment. Use the gap sliders and toggle buttons for justify-items, align-items, justify-content, and align-content.
Step 4: Span cells. Click a cell, then drag the column/row span sliders to create larger areas for headers, sidebars, or featured content.
Step 5: Copy code. Switch between CSS and Tailwind output tabs, then click Copy to get production-ready code.
Holy Grail layout. The classic web design pattern with a full-width header, left sidebar, main content, right sidebar, and full-width footer. Grid makes this trivial with named areas or spanning cells.
Card grid. A responsive grid of equally-sized cards that automatically adjusts the number of columns based on available space. Use repeat(auto-fill, minmax(250px, 1fr)) for a layout that works at any screen size.
Dashboard layout. A fixed sidebar navigation with a flexible content area divided into panels. The sidebar spans all rows while content panels fill the remaining columns.
Magazine layout. A feature article with a large hero image spanning multiple columns, surrounded by smaller articles and sidebars. Grid's spanning capabilities make this straightforward.
Last updated: March 2026