Wat is CSS Grid?
CSS Grid Layout is een tweedimensionaal indelingssysteem dat is ingebouwd in moderne browsers. U definieert een rastercontainer met display: grid, en beheert vervolgens kolommen met grid-template-columns en rijen met grid-template-rows. Breukenheden (fr) verdelen de beschikbare ruimte proportioneel. Onderliggende elementen kunnen meerdere kolommen of rijen beslaan met grid-column: span N en grid-row: span N.
De CSS Grid Generator gebruiken
-
Stel het aantal kolommen en rijen in met de getalvelden (elk 1–12).
-
Pas grid-template-columns en grid-template-rows aan om de afmetingen te beheren (bijv. 1fr 2fr, 200px auto).
-
Stel de tussenruimte tussen cellen in (bijv. 10px, 1rem).
-
Klik op een willekeurige cel in de voorvertoning om deze te selecteren (wordt oranje).
-
Stel col-span en row-span in het paneel Celbereik in, klik vervolgens op Toepassen. Cellen met bereik worden groen.
-
Klik op het tabblad CSS of HTML om het uitvoerformaat te wisselen, kopieer dan naar klembord.
-
Klik op Alles herstellen om opnieuw te beginnen met een nieuw 3×3-raster.