CSS Grid Generator
Bouw CSS-gridlay-outs visueel.
Lay-outvoorinstellingen (10)
Sleep over cellen om een rechthoek te tekenen, of klik één cel per keer. Elk benoemd gebied moet rechthoekig blijven.
Live voorbeeld
Eéndimensionaal: CSS Flexbox Generator.
Bouw een CSS-grid met benoemde gebieden
Teken een letterraster voor template-gebieden, of kies een voorinstelling. Het voorbeeld toont elk gebied in een aparte tint.
FAQ
Wat is grid-template-areas?
Een manier om gebieden van een lay-out (header, sidebar, main…) een naam te geven en items op naam te plaatsen in plaats van op regelnummers. Klik op de cellen hieronder om gebiedsletters in te tekenen — de CSS wordt live bijgewerkt.
Kan ik met een voorinstelling beginnen?
Ja — tien lay-outvoorinstellingen, waaronder Holy grail, dashboard, magazine en app shell, laden benoemde gebieden met één klik.
Wordt er iets geüpload?
Nee. De CSS wordt volledig in je browser gegenereerd.
Laatst bijgewerkt: