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.

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;
}