Wat is CSS Grid?

CSS Grid Layout (of gewoonweg CSS Grid) is een tweedimensionaal lay-outsysteem in CSS. Het stelt je in staat om de plaatsing van elementen zowel in rijen (horizontaal) als in kolommen (verticaal) te beheren, waardoor complexe rasterstructuren ontstaan voor het bouwen van interfaces.

De belangrijkste concepten van CSS Grid omvatten:

Grid Container: Element waarop de eigenschap display: grid of display: inline-grid wordt toegepast. Afstammelingen van dit element worden Grid Items.
Grid Items: Directe afstammelingen van de Grid Container.
Grid lijnen: Scheidende lijnen die het raster vormen. Ze kunnen benoemd zijn of een numerieke index hebben.
Grid sporen: De ruimte tussen twee lijnen in het raster — dit kan een kolom of een rij zijn.
Grid cellen: De kleinste eenheid van het raster, gevormd door de kruising van een rij en een kolom.
Grid gebieden: Een rechthoekig gebied in het raster dat één of meerdere cellen beslaat.

Belangrijke eigenschappen voor het werken met CSS Grid omvatten:

Voor de container:

display: grid | inline-grid;
grid-template-columns: Definieert de kolommen van het raster.
grid-template-rows: Definieert de rijen van het raster.
grid-template-areas: Definieert benoemde gebieden in het raster.
gap | row-gap | column-gap: Definieert de ruimtes tussen de cellen.
justify-items | align-items | place-items: Uitlijning van de inhoud binnen de cellen langs de hoofd- en dwarsassen.
justify-content | align-content | place-content: Uitlijning van de rasterlijnen binnen de container.

Voor de elementen (Grid Items):

grid-column-start | grid-column-end | grid-column: Bepaalt welke kolomlijnen het element inneemt.
grid-row-start | grid-row-end | grid-row: Bepaalt welke rijlijnen het element inneemt.
grid-area: Kenmerkt het element een benoemd rastergebied toe of bepaalt de positie met behulp van lijnen.
justify-self | align-self | place-self: Uitlijning van het element binnen zijn cel.

CSS Grid biedt krachtige hulpmiddelen voor het maken van responsieve en complexe lay-outs, wat de taken aanzienlijk vereenvoudigt die voorheen gebruik maakten van float, inline-block of absolute positionering.

.container {
  display: grid; /* Maakt het element tot een Grid-container */
  grid-template-columns: 1fr 1fr 1fr; /* Creëert 3 kolommen van gelijke breedte */
  grid-template-rows: auto auto; /* Creëert 2 rijen met automatische hoogte */
  gap: 10px; /* Voegt ruimtes toe tussen de cellen */
}

.item {
  /* Elementen binnen de container worden automatisch Grid Items */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Het eerste element beslaat kolommen 1 tot 3 */
}