CSS Grid-layout met zijbalk en inhoud
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 een layout van twee kolommen en één rij: een sidebar-kolom van 200px naast een flexibele contentkolom die de resterende ruimte inneemt. Beide gebieden zijn meteen zichtbaar in de live preview, ingekleurd en gelabeld, zodat de verdeling in één oogopslag duidelijk is.
Dit is de meest voorkomende navigatie-plus-content-opbouw op het web — instellingenpagina’s, documentatiesites en admin-dashboards vertrouwen allemaal op een balk met vaste breedte naast een vloeiend hoofdgebied. Omdat de sidebar-kolom een pixelwaarde gebruikt en de contentkolom 1fr, blijft de sidebar constant van breedte terwijl het contentgebied elke extra pixel van de viewport opneemt.
Geef een van beide gebieden een andere naam, pas de kolombreedte aan of voeg extra rijen toe voor een header boven de splitsing — de CSS- en HTML-uitvoer hieronder volgen elke bewerking in realtime. De tool is gratis en werkt volledig in je browser, zonder upload en zonder account.