Skip to main content

Introductie tot CSS Grid

Wat is CSS Grid?

CSS Grid Layout, vaak gewoon Grid genoemd, is een tweedimensionaal grid-systeem dat je in staat stelt om elementen zowel in de rij- als in de kolomrichting te plaatsen. Het is ontworpen om complexe weblayouts eenvoudiger te maken.

grid.png

Waarom CSS Grid Gebruiken?

  • Tweedimensionale Controle: In tegenstelling tot Flexbox, dat voornamelijk eendimensionaal is (rij of kolom), kun je met Grid zowel rijen als kolommen tegelijk beheren.
  • Complexe Layouts: Creëer geavanceerde en responsieve layouts met minder code.
  • Flexibiliteit: Pas de layout aan op basis van de inhoud en beschikbare ruimte.

Basisconcepten

  • Grid Container: Het element dat display: grid; krijgt.
  • Grid Items: De directe kinderen van de grid container.
  • Grid Lines: De lijnen die de rijen en kolommen scheiden.
  • Grid Tracks: De rijen en kolommen zelf.
  • Grid Cells: De ruimtes tussen de lijnen, vergelijkbaar met cellen in een tabel.

Opzetten van een Grid Container

.container {
    display: grid;
}

Back to top