# 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](https://www.digitaallab.nl/uploads/images/gallery/2024-10/scaled-1680-/grid.png)](https://www.digitaallab.nl/uploads/images/gallery/2024-10/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

```css
.container {
    display: grid;
}
```