Holy Grail CSS Grid Layout — Kant-en-klare code
Ontwerp CSS Grid-layouts visueel: stel kolommen, rijen en witruimte in, en typ vervolgens gebiedsnamen in cellen om grid-template-areas op te bouwen — met een live preview en kopieerbare CSS en HTML.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de grid-generator met de holy grail-layout al geladen: drie kolommen en drie rijen, met header en footer die de volle breedte beslaan en daartussen een rij met nav, main en aside. De header-rij gebruikt auto-hoogte, de middelste rij vult de resterende ruimte en de twee zijkolommen staan vast op 200px terwijl de middenkolom de rest pakt.
De holy grail-layout dankt zijn naam aan het feit dat hij vóór CSS Grid oprecht lastig betrouwbaar te bouwen was — jarenlang werden float-hacks, table-layouts en absolute positionering gebruikt om deze vorm na te bootsen. Met grid-template-areas wordt het teruggebracht tot vijf benoemde regio’s en een handvol spoorafmetingen, en daarom blijft het het standaard eerste voorbeeld bij het aanleren van CSS Grid.
Elk getal en elke gap op deze pagina is nog steeds live: verklein de zijkolommen, voeg een vierde rij toe of hernoem een gebied, en de preview en de kopieerbare CSS worden direct bijgewerkt. Plak de CSS- en HTML-blokken rechtstreeks in je project — alles draait lokaal in je browser, er wordt niets geüpload.