CSS Grid voor layouts
Definieer rijen en kolommen met CSS Grid, plaats items nauwkeurig en maak veelgebruikte paginalayouts met minimale code.
CSS Grid voor layouts is een gratis Frontend Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat is CSS Grid?
CSS Grid is een tweedimensionaal indelingssysteem — je beheert zowel rijen als kolommen. Het is het beste hulpmiddel voor de algemene paginastructuur en voor het expliciet plaatsen van elementen in een bepaald raster.
Kolommen definiëren: grid-template-columns
grid-template-columns definieert de kolomstructuur. Gebruik vaste afmetingen (px), flexibele fracties (fr) of auto. repeat(n, size) herhaalt een rastertrackdefinitie.
.layout {
display: grid;
grid-template-columns: 240px 1fr; /* sidebar + main */
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}De eenheid fr
fr (fractie-eenheid) verdeelt de overgebleven ruimte naar verhouding. 1fr 2fr geeft de tweede kolom twee keer zoveel ruimte als de eerste. Essentieel voor flexibele rastertracks.
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* left center right */
}Rijen definiëren: grid-template-rows
Je kunt ook expliciet rijen definiëren. Als je dat niet doet, maakt de browser automatisch impliciete rijen. grid-auto-rows: minmax(200px, auto) bepaalt de grootte van impliciete rijen.
.page {
display: grid;
grid-template-rows: auto 1fr auto; /* header content footer */
min-height: 100vh;
}gap in Grid
Net als bij Flexbox voegt gap ruimte toe tussen rastertracks zonder de buitenranden te beïnvloeden. row-gap en column-gap beheren de assen afzonderlijk.
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}grid-template-areas
Geef rastergebieden namen met tekenreeksen en wijs elementen eraan toe met grid-area. Zo ontstaat leesbare, visuele indelingscode.
.page {
display: grid;
grid-template-areas:
'header header header'
'sidebar main main'
'footer footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Items plaatsen met grid-column en grid-row
Bepaal precies waar een item staat met grid-column: start / end en grid-row: start / end. Gebruik -1 om naar de laatste lijn te verwijzen. span N beslaat N rastertracks.
.featured {
grid-column: 1 / -1; /* span all columns */
grid-row: span 2; /* occupy two rows */
}auto-fit en minmax() — responsieve kolommen
De krachtigste eenregelige responsieve rasterdefinitie: repeat(auto-fit, minmax(280px, 1fr)). Hiermee worden zoveel kolommen gemaakt als er passen, elk minstens 280px breed, waarbij de resterende ruimte met 1fr wordt gevuld.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}auto-fill tegenover auto-fit
auto-fill maakt ook rastertracks als ze leeg zijn, zodat het raster vast blijft. auto-fit laat lege tracks samenvallen, zodat items uitzetten en de rij vullen. Gebruik auto-fit voor inhoud die moet uitrekken.
Impliciet tegenover expliciet raster
Tracks die je definieert vormen het expliciete raster. Wanneer je meer items toevoegt dan er gedefinieerde tracks zijn, maakt de browser impliciete tracks. Beheer hun grootte met grid-auto-rows en grid-auto-columns.
Grid tegenover Flexbox — wanneer gebruik je welke?
Grid: tweedimensionale indelingen, paginastructuur, galerijen en dashboards. Flexbox: eendimensionale rijen of stapels, centreren en items over een rij verdelen. Ze vullen elkaar aan — gebruik Grid voor het paginaskelet en Flexbox voor de onderdelen daarbinnen.
Korte controle
Welke CSS-waarde maakt kolommen die minstens 250px breed zijn en de resterende ruimte gelijk verdelen?
Samenvatting: CSS Grid
grid-template-columns definieert kolommen. fr verdeelt ruimte. repeat() vereenvoudigt herhaling. gap voegt tussenruimtes toe. grid-template-areas maakt indelingen leesbaar. auto-fit + minmax maakt responsieve rasters zonder mediaquery's. Grid is de standaardkeuze voor tweedimensionale pagina-indelingen.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “CSS Grid voor layouts” gratis?
Ja — de volledige tekst van “CSS Grid voor layouts” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “CSS Grid voor layouts”?
Definieer rijen en kolommen met CSS Grid, plaats items nauwkeurig en maak veelgebruikte paginalayouts met minimale code. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “CSS Grid voor layouts”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- De viewport-metatag
- Flexbox voor layouts
- CSS Grid voor layouts
- Mediavragen en mobile-first-ontwikkeling