CSS Grid Generator
Wat is CSS Grid?
CSS Grid Layout is het krachtigste layoutsysteem in CSS. Het is een tweedimensionaal systeem dat zowel kolommen als rijen kan verwerken, in tegenstelling tot flexbox dat voornamelijk eendimensionaal is.
Hoe deze CSS Grid Generator te gebruiken
Grid afmetingen instellen
Gebruik de zijbalk om kolommen, rijen och tussenruimtes te definiëren.
Grid gebieden definiëren
Klik en sleep op het voorbeeld om rechthoekige gebieden te selecteren.
Eenheden aanpassen
Pas kolom- en rijgroottes aan via de invoervelden.
Sjabloon proberen
Kies uit vooraf gemaakte layouts zoals Holy Grail, Blog of Dashboard.
Code genereren
Klik op "Code genereren" om kant-en-klare CSS en HTML te exporteren.
CSS Grid Syntax Gids
De kern van CSS Grid omvat eigenschappen zoals grid-template-columns (om kolombreedtes te definiëren), grid-template-rows (om rijhoogtes te definiëren) en grid-gap (om tussenruimte in te stellen). Het gebruik van fractionele eenheden (fr) maakt flexibele layouts mogelijk die zich aanpassen aan de grootte van het venster.
CSS Grid Layout Voorbeelden
Veelvoorkomende voorbeelden zijn de 'Holy Grail' layout (header, sidebar, main, footer) en de 'Main/Sidebar' layout. Met grid-template-areas kunt u deze gebieden definiëren met intuïtieve namen, waardoor uw code veel schoner en gemakkelijker te onderhouden is.