De handigheid van diplay:grid;

Grid in CSS kan gebruikt worden om de lay-out van een webpagina te definiëren. Het is een flexibele manier om de lay-out te vormen en komt onder andere in Flexbox, CSS Grid en Bootstrap voor.

Om grid te gebruiken, moet je een grid-container definiëren. Deze container bevat alle items die door het grid beheerd worden. In de grid-container, moet je vervolgens alle items definiëren die je wilt dat worden beheerd door het grid.

Vervolgens moet je de grid-items definiëren met behulp van CSS Grid-specific propertieën. Deze propertieën zijn onder andere grid-template-columns, grid-template-rows en grid-gap.

Met deze propertieën kun je de kolommen en rijen definiëren waaruit je grid bestaat en de afstand tussen deze kolommen en rijen instellen.

Daarnaast kun je ook grid-items specifiek positieren door middel van de propertie grid-column en grid-row.

Tot slot, kun je ook grid-items laten schalen door middel van de propertie grid-auto-flow.

Met deze propertieën kun je een flexibele lay-out maken die aanpasbaar is voor verschillende schermresoluties en apparaten.

Voorbeeld:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

Is het aan te raden?

Display Grid is een krachtig hulpmiddel voor webontwerpers en –ontwikkelaars. Het maakt het maken van een gestructureerd ontwerp eenvoudiger, waardoor de ontwikkeling en het uiterlijk van de website beter wordt. Display Grid biedt een flexibel raamwerk waarmee je een responsief, gebruiksvriendelijk ontwerp kunt maken. Het helpt bij het maken van consistente lay–outs en het verbeteren van de bruikbaarheid van een site. Het is ook een geweldig hulpmiddel voor het maken van veel verschillende lay–outs, waarmee je de verschillende pagina‘s van je website kunt aanpassen.

Hieronder zie je een voorbeeld met display grid waar 4 kolommen per rij zijn en de laatste rij 2 kolommen heeft. 

<div style="display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);">
  <div class="cell1">Kolom 1</div>
  <div class="cell2">Kolom 2</div>
  <div class="cell3">Kolom 3</div>
  <div class="cell4">Kolom 4</div>
  <div class="cell5">Kolom 5</div>
  <div class="cell6">Kolom 6</div>
  <div class="cell7">Kolom 7</div>
  <div class="cell8">Kolom 8</div>
  <div class="cell9" style="grid-column: 1/3;">Kolom 9</div>
  <div class="cell10" style="grid-column: 3/5;">Kolom 10</div>
</div>