Lab — Devtool
Grid Builder is a free online tool that turns a drawn layout into CSS grid code — set your columns and rows, drag across the canvas to mark out a region, place items into it, and copy the exact CSS into your own project. No account, nothing leaves the page.
Grid
Canvas — drag across cells to select a region, then place an item
No region selected — drag across cells, then Place item.
Items (none yet)
Change any control and the canvas, the CSS below, and this note update together.
Generated CSS
grid-template-columns: repeat(4, 1fr) makes four equal tracks; gap is the gutter between them.grid-column: 1 / 3 starts at line 1 and ends at line 3, so it spans two columns. Lines are numbered from 1, and the last line is tracks + 1.grid-row works the same way down the page. Give each item a column span and a row span and the layout is fully described — no floats, no wrappers.