Hoe vertrouwd ben je met werken met CSS? Ken je Grid Layout?

Ik werk vrij vaak met CSS, inclusief het gebruik van Grid Layout om complexe responsieve lay-outs te bouwen. CSS Grid is een krachtig hulpmiddel voor het maken van tweedimensionale rasterstructuren, waarmee je gemakkelijk de plaatsing van elementen in rijen en kolommen kunt beheren.

Voorbeeld van een eenvoudige Grid Layout:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.item {
  background-color: #ccc;
  padding: 20px;
  text-align: center;
}

In HTML:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Dit zal een raster maken van 3 kolommen en 2 rijen met gelijke verdeling van de elementen. Grid Layout is handig voor het maken van complexe en flexibele interfaces zonder float of flexbox te gebruiken voor soortgelijke taken.