Introductie tot CSS Grid

CSS Grid is een manier om elementen zowel horizontaal als verticaal te plaatsen. Het is een geavanceerdere methode vergeleken met flexbox, maar complexer om onder de knie te krijgen.

Om een grid te maken, moet je de eigenschap display instellen op de waarde grid:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
}

Hierna verandert het element in een tweedimensionaal raster, waarin elementen worden geplaatst zowel verticaal (kolommen) als horizontaal (rijen). Het gebied op het snijpunt van een kolom en een rij wordt een cel genoemd.

Met behulp van speciale eigenschappen kun je elementen plaatsen op basis van zowel rijen als kolommen. Dit maakt het gemakkelijk om dingen zoals dit te maken:

In de volgende lessen zullen we eerst de plaatsing van elementen op basis van kolommen bestuderen, daarna gaan we verder met het bestuderen van rijen, en daarna combineren we alles samen.