Een CSS Grid Layout is een krachtige tool in CSS waarmee je complexe, responsieve webpagina-layouts kunt maken.

Het is een twee-dimensionaal raster-gebaseerd systeem, waarbij je elementen kunt plaatsen in rijen en kolommen. Dit maakt het makkelijker voor jou als webdesigner om ingewikkelde layouts te ontwerpen zonder afhankelijk te zijn van floats of positioning hacks in je CSS stylesheet.

CSS Grid Layout voorbeeld

Stel dat je een eenvoudige layout met drie kolommen en twee rijen wilt maken. Hier is hoe je dat kunt doen met CSS Grid:


.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
gap: 10px; }


.grid-item{
background-color: #8cacea;
padding: 20px;
text-align: center;
border: 1px solid #000; }

1
2
3
4
5
6

Uitleg CSS Grid Layout

  • Grid Container: De .grid-container class gebruikt display: grid; om de grid layout te activeren.
  • Grid Template Columns en Rows: grid-template-columns: repeat(3, 1fr); maakt drie kolommen die elk een gelijke breedte hebben. grid-template-rows: 100px 100px; maakt twee rijen van elk 100px hoog.
  • Gap: gap: 10px; zorgt voor een ruimte van 10px tussen de grid items.
  • Grid Items: Elke .grid-item is een item binnen de grid container en wordt automatisch geplaatst in de volgende beschikbare cel.

Feedback

Heb je na het lezen van dit artikel nog vragen of zijn er onduidelijkheden? Werkt de code niet op jouw website? Laat het ons weten, dan kunnen wij je misschien verder helpen.

Feedback kennisbankartikel

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.