🧱 CSS Grid Layout Generator
Set up columns, rows and gap, then click and drag across the preview to merge cells into spanning grid items. The preview renders real CSS Grid, and the CSS below updates live as you build.
Click and drag across free cells in the preview to merge a rectangular block into one spanning item. Click the × on a merged item to split it back apart. Changing the column or row count clears existing merges (the coordinates would no longer make sense).
1. Grid setup
2. Live preview
Click and drag across cells to merge them into one grid item.