CSS Grid Generator
Bouw grid-layouts visueel — configureer kolommen, rijen en tussenruimtes, teken items door te klikken of te slepen.
① Stel kolommen & rijen en trackgroottes in ② Klik op cellen om items toe te voegen en sleep voor span ③ Kopieer de CSS
Kolommen
Rijen
Kolomafstand (px)
16
Rijafstand (px)
16
Kol
C1
C2
C3
Rij
R1
R2
R3
Preview
Gegenereerde CSS
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
column-gap: 16px;
row-gap: 16px;
}CSS Grid gebruiken
CSS Grid is een tweedimensionaal layoutsysteem voor gelijktijdige controle over kolommen en rijen. Gebruik fr-eenheden voor proportionele ruimteverdeling, px voor vaste afmetingen, % voor relatieve afmetingen en auto voor inhoudsaanpassing. De gap-eigenschap voegt gelijkmatige tussenruimte toe. Definieer grid-items met grid-column en grid-row via start-/eind-lijnnummers.
Veelgestelde vragen
CSS Grid Layout is een tweedimensionaal layoutsysteem ingebouwd in browsers. In tegenstelling tot Flexbox (dat op één as werkt), kun je met Grid expliciete rijen en kolommen definiëren en items overal in het grid plaatsen.
fr staat voor "fractionele eenheid". Het vertegenwoordigt een fractie van de beschikbare ruimte in de gridcontainer. Voorbeeld: grid-template-columns: 1fr 2fr 1fr maakt drie kolommen waarbij de middelste twee keer zo breed is.
Gebruik auto als je wilt dat een kolom of rij zich aanpast aan de inhoud. Gebruik fr om de resterende ruimte proportioneel te vullen. Combinatie — bv. auto 1fr — maakt een zijbalk die zich aanpast aan de inhoud.
gap is de afkorting voor beide. gap: 16px stelt beide gelijk in, gap: 16px 24px stelt row-gap eerst in. Ze vervangen het verouderde grid-gap.
grid-column: 1 / 3 plaatst een item van lijn 1 tot lijn 3, overbrugt 2 kolommen. Alternatief overbrugt grid-column: span 2 twee kolommen vanaf de huidige positie. Deze generator gebruikt de start/eind-syntaxis.
Ja. CSS Grid wordt sinds 2017 in alle moderne browsers ondersteund (Chrome 57, Firefox 52, Safari 10.1, Edge 16). Het kan veilig in productie worden gebruikt zonder fallbacks.
Deze generator ondersteunt tot 12 kolommen en 8 rijen, wat de overgrote meerderheid van layouts dekt. CSS zelf heeft geen vaste limiet.