3 Gelijke kolommen CSS Grid Layout
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 ingesteld op drie even brede kolommen in één rij, met benoemde gebieden uitgeschakeld — de layout is simpelweg repeat(3, 1fr), de kortste manier om te zeggen 'drie kolommen die de beschikbare breedte altijd gelijkmatig verdelen'.
Kolommen van gelijke breedte zijn het werkpaard van kaartrasters, prijstabellen en afbeeldingengalerijen: geen enkel gebied hoeft een naam te krijgen omdat elke kolom dezelfde rol speelt, dus kale spoorbepaling is duidelijker dan een grid-template-areas-declaratie zou zijn. Voeg een rij toe en dezelfde drie sporen worden er netjes onder herhaald, nog steeds perfect gelijk.
Verhoog het aantal kolommen voor een dichter raster, of schakel benoemde gebieden in als een latere kolom moet opvallen tussen de rest — de CSS en HTML hieronder werken direct bij zodra je dat doet. Alles draait client-side, dus er valt niets te uploaden en nergens op te wachten.