Donaldson R F CSS Grid Generator
Design a CSS Grid layout with live preview — columns, rows, gaps and item placement — then copy the code.
Track sizes accept 1fr, 200px, 25%, auto, minmax(100px, 1fr), repeat(3, 1fr) and similar, separated by spaces.
Items
CSS Grid in a nutshell
A grid container defines grid-template-columns and grid-template-rows; children are placed automatically, or you place them yourself with grid-column and grid-row. Lines are numbered from 1 — an item with column 1 / 3 starts at line 1 and ends at line 3, so it spans two columns. fr units share the free space in proportion, gap adds spacing between tracks, and minmax() or repeat() keep responsive layouts compact. Leave an item's start and end blank to let it flow automatically. The preview uses the very same CSS that is shown, so what you see is what you get.