Grid playground
Build a CSS grid layout - track count, gaps, alignment, and per-item placement - with a live preview, and copy the code.
Add a file and run the tool.
Your file is ready.
Try a different file, or try again.
Settings
Adjust the settings below. The result updates as you go.
Runs fully in your browser. Nothing is uploaded.
Runs fully in your browser. Nothing is uploaded.
How it works
Pick a preset, or start from the default 3×3 grid.
Adjust the column and row counts, gaps, and alignment.
Select an item to place it with a custom column or row span, then copy the CSS.
Frequently asked questions
No. The grid and the generated CSS are built entirely in your browser.
A custom placement past your explicit column or row count creates an extra implicit track automatically - that is valid CSS, not a bug.
justify-items positions content inside each cell. justify-content positions the whole set of tracks inside the container - you only see a difference when the tracks don't fill the container.
Yes, and that's correct. A grid's column axis follows the page direction, so column 1 renders on the opposite physical side under RTL, with no extra code - this tool shows real CSS Grid behavior, not a left-to-right approximation.
Guides
A closer look at specific problems this tool solves.
Why CSS Grid Draws the Layout Before the Content Arrives
Most CSS layout starts with the content and lets the container follow. Grid turns that around: the parent declares rows and columns first, and items are placed onto its lines. That is why grid feels strange at first and why it holds alignment so well.
Read the guideHow to Make a Grid Item Span Two Columns
grid-column: 1 / span 2 makes an item cover two columns. Where you put the start line, whether you also pin the row, and what happens to the items after it are the parts that decide whether the rest of the grid still looks right.
Read the guideThe Holy Grail Layout With CSS Grid, and What to Change After
Header, footer, a main column between two sidebars: grid does the holy grail layout in a few lines. The first version has equal rows and equal columns, though, and that is rarely what a real page wants. Here is the whole path from preset to page.
Read the guide
Comments