In deze opdracht ga je kennis maken met de CSS property: grid

Hiermee kun je elementen op een pagina automatisch laten uitlijnen via een grid:

Uitleg

Stel, je hebt een website met 4 kolommen naast elkaar. Dan kun je deze exact op de pixel gaan proberen te positioneren, maar je kunt ook je browser dat werk laten doen door gebruik te maken van CSS GRID.

Voorbeeld:

Met deze html en css code kun je de 4 ‘nested’ div’jes verdelen in 2 rijen van 2 blokken:

<!-- html -->
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

/* css */
.container {
  display: grid;
  grid-template-columns: auto auto; /* 2 kolommen met auto-breedte naast elkaar */
}
.container div {
  background-color: #ffffff;
  padding: 10px;
  border:1px solid #000000;
}

Wil je 4 kolommen naast elkaar? verander dan de css code naar:

/* css */
.container {
  display: grid;
  grid-template-columns: auto auto auto auto; /* 4 kolommen met auto-breedte naast elkaar */
}
.container div {
  background-color: #ffffff;
  padding: 10px;
  border:1px solid #000000;
}

Spel - Grid Garden

Speel het ‘spel’ grid-garden, om te leren hoe grid werkt

https://cssgridgarden.com/#nl