Build CSS Grid layouts visually. Set columns, rows, gaps, and alignment. Click cells to span them across tracks. Choose from preset layouts or build your own. Copy the generated CSS or Tailwind classes 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.
CSS Grid Layout is a two-dimensional layout system built into CSS. Unlike Flexbox, which handles layout along a single axis, Grid lets you control both rows and columns at the same time. You define a grid on a container element with display: grid, set up tracks using grid-template-columns and grid-template-rows, and the browser automatically places child elements into the grid cells.
CSS Grid has 97.5% global browser support and has been available since Chrome 57 (March 2017), Firefox 52, Safari 10.1, and Edge 16. It is a production-ready technology used by major websites and frameworks. Grid is particularly powerful for page-level layouts, dashboard designs, card grids, and any interface that requires precise two-dimensional positioning.
Step 1: Set your grid dimensions. Use the + and - buttons to add or remove columns and rows (1 to 12 each). Type a size value for each track: 1fr, 200px, auto, or minmax(200px, 1fr).
Step 2: Adjust gaps and alignment. Slide the column-gap and row-gap controls to set spacing between tracks. Choose justify-items, align-items, justify-content, and align-content to control cell and grid alignment.
Step 3: Span cells across tracks. Click any cell in the preview to select it. Use the sliders to set its column span and row span. Cells that span multiple tracks are shown with their span values.
Step 4: Try preset layouts. Click Holy Grail, Two Column, Three Column, Card Grid, or Dashboard to instantly load a common layout pattern. Customize it further from there.
Step 5: Copy the code. Switch between CSS and Tailwind tabs, then click Copy. The generated code is production-ready and includes only non-default properties to keep it clean.
Live visual preview. The grid preview updates instantly as you change any property. Colored numbered cells show exactly how your grid layout behaves. No refresh needed, no generate button to click.
Custom track sizes. Each column and row can have its own size value. Use fr units for flexible proportions, px for fixed sizes, auto for content-based sizing, or minmax() for responsive ranges. Mix and match freely.
Cell spanning. Click any cell to select it, then set its column and row span with sliders. This lets you create complex layouts like headers that span the full width or sidebars that span multiple rows.
Preset layouts. Five common layout patterns are built in: Holy Grail (header, sidebar, content, sidebar, footer), Two Column, Three Column, Card Grid with auto-fill, and a Dashboard layout. Load any preset and customize it.
CSS and Tailwind output. Get clean, production-ready code in either vanilla CSS or Tailwind utility classes. The output only includes properties that differ from defaults, keeping your code minimal and readable.
Built-in cheat sheet. Expand the collapsible Grid cheat sheet below the code output for a quick reference of key grid properties, right where you need it.
Use CSS Grid when you need to control layout in two dimensions simultaneously. Page layouts with headers, sidebars, main content, and footers are a classic Grid use case. Dashboard layouts with panels of varying sizes, image galleries with specific placement, and any design where you need items to align across both rows and columns are ideal for Grid.
Use Flexbox when you are laying out items along a single axis. Navigation bars, button groups, card rows that wrap, centering a single element, and distributing items with varying sizes along one direction are Flexbox territory. Flexbox is simpler for one-dimensional problems.
Combine both for the best results. Use Grid for the overall page structure, then Flexbox inside individual grid cells for component-level alignment. A dashboard might use Grid for the panel layout and Flexbox inside each panel to align its header, content, and action buttons.
Last updated: March 2026