CSS Grid Generator
Gratis online CSS-Grid-layout-generator, visuele editor
CSS Grid Layout-basics
CSS Grid is een tweedimensionaal lay-outsysteem voor het rangschikken van elementen in rijen en kolommen. Belangrijke eigenschappen: grid-template-columns definieert kolomtracks, grid-template-rows definieert rijtracks, gap bepaalt spatiëring en grid-area positioneert items. Grid is ideaal voor paginalay-outs.
De Grid-generator gebruiken
Stel het aantal kolommen en rijen in. De preview toont de grid-lay-out. Pas groottes en tussenruimten aan. Kopieer de gegenereerde CSS-code voor uw project.
▶Wanneer moet ik Grid versus Flexbox gebruiken?
Gebruik Grid voor tweedimensionale lay-outs (rijen EN kolommen tegelijk). Gebruik Flexbox voor eendimensionale lay-outs (ofwel een rij OF een kolom). Grid is beter voor paginalay-outs; Flexbox is beter voor componentlay-outs.
▶Wat is de fr-eenheid in CSS Grid?
fr (fractie) is een flexibele eenheid die de resterende ruimte verdeelt. grid-template-columns: 1fr 2fr geeft de tweede kolom tweemaal zoveel ruimte als de eerste. Het is vergelijkbaar met flex-grow in Flexbox.
▶Kunnen Grid-items meerdere cellen overspannen?
Ja. Gebruik grid-column: span 2 of grid-row: span 2 om een item meerdere kolommen of rijen te laten overspannen. U kunt ook benoemde grid-areas gebruiken voor complexe lay-outs.