Design complex two-dimensional web layouts effortlessly using the CSS Grid Builder.
Add columns and rows, place items spanning multiple tracks, and copy the clean, responsive CSS output.
Try:
Grid Controls
Columns 3
Rows 3
Column Gap 1rem
Row Gap 1rem
justify-items
align-items
Named Areas
Click cells to assign area names
Live Preview
Area name:
Click a cell to assign a named area
Generated CSS
Advertisement
Columns & Rows
Each track value accepts any valid CSS: 1fr, 200px,
minmax(100px,1fr), auto, repeat(3,1fr). Add or remove tracks with the
+ / − buttons.
Named Areas
With Named Areas enabled, click any cell to open the name editor. Type an area name
(e.g. header, sidebar) and press Enter or click Done. The generated CSS includes
grid-template-areas and child grid-area rules.
Gap
Drag the sliders or type a value directly — accepts px, rem,
or %. Column and row gaps are set independently.
Presets
Jump-start with Holy Grail (header/nav/main/aside/footer), Dashboard (sidebar + content
panels), Card Grid (auto-fill responsive cards), Sidebar, or a Masonry-like layout.
CSS Output
⎘ Copy CSS copies the container rule. ⎘ Copy Child Rules
copies the named area child selectors. Paste both into your stylesheet.
fr Units
1fr means "one fraction of the available space". 2fr 1fr 1fr
gives the first column twice the width of the other two. Mix with fixed units: 200px 1fr.
Gutter Drag
Switch to ⇔ Gutter Drag mode to resize columns and rows by dragging the
lines between them. A tooltip shows sizes live. Values are written as px. Switch back to
Controls to convert to fr or other units.
Gap Resize
In Gutter Drag mode, the gap region between tracks is also draggable. Drag it sideways
(columns) or up/down (rows) to make the gap wider or narrower. The gap value updates live and syncs with the
sliders in Controls mode.
Cell Drag & Drop
In Gutter Drag mode with Named Areas on, grab any cell and drag it onto another cell to
swap their area names. Drag a named cell onto an empty one to move the name. The CSS output updates
immediately.
Advertisement
How to use
Open the tool and enter your data or select options.
Adjust settings to see real-time updates.
Copy the generated result to your clipboard.
Frequently Asked Questions
What is CSS Grid?
CSS
Grid Layout is a two-dimensional grid-based layout system that allows you to design complex web pages without
using floats or positioning.
How do I span items across multiple columns?
Select a grid item and adjust its column-start and column-end properties to make it span across the desired
tracks.
Is CSS Grid responsive?
Yes,
CSS Grid is inherently responsive. You can use fractional units (fr) and minmax() functions to create fluid
layouts.
Did you know?
CSS Grid is the most powerful layout system available in CSS, created specifically to solve layout problems.
The 'fr' (fractional) unit was introduced specifically for CSS Grid to easily divide available space.
Grid allows you to completely rearrange the visual order of elements without changing the underlying HTML
structure.