Lay out a page with CSS grid

The job

You know the shape of the layout — a sidebar and content, a card wall, a magazine page — but not the exact `grid-template` syntax. A visual generator turns fiddling into copyable CSS.

Build the grid

Set columns, rows, and gap, then mark spans on the preview cells: click a cell to stretch it across neighbours. The generator emits two CSS blocks — the container's `display: grid` plus `grid-template-columns/rows`, and each item's `grid-column`/`grid-row` span.

• Column widths can be `fr` units (share the space) or fixed `px`.
• The preview uses the same numbers your CSS gets — what you see is what renders.

Worked example

A 3-column gallery with a 2×2 hero tile: columns 3 / rows 2 / gap 16 px, then span cell 1 across two columns and two rows. Copy the container rule plus the one item rule for the hero.

Where it stops

Up to 12 columns and 12 rows, fixed px or fr units — no minmax(), no auto-fit/auto-fill, no named areas. For responsive grids that reflow by viewport, write the media queries yourself or use grid areas by hand.