# CSS Grid Eigenschappen

### Definiëren van Kolommen en Rijen

Gebruik de eigenschappen `grid-template-columns` en `grid-template-rows`.

#### Voorbeeld

```css
.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
    grid-template-rows: 100px 100px;
}
```

**Uitleg:**

- **Kolommen**: Drie kolommen van elk 200px breed.
- **Rijen**: Twee rijen van elk 100px hoog.

### Gebruik van de `fr` Eenheid

De `fr` (fraction) eenheid verdeelt beschikbare ruimte in fracties.

```css
.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}
```

**Uitleg:**

- De totale beschikbare ruimte wordt verdeeld in 4 fracties (1 + 2 + 1).
- De eerste kolom krijgt 1/4 van de ruimte.
- De tweede kolom krijgt 2/4 (of 1/2) van de ruimte.
- De derde kolom krijgt 1/4 van de ruimte.

### Grid Gap

Voeg ruimte toe tussen de grid items met `grid-gap`.

```css
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}
```

### Plaatsen van Grid Items

Gebruik `grid-column` en `grid-row` om items te positioneren.

#### Voorbeeld

```css
.item1 {
    grid-column: 1 / 3; /* Van kolomlijn 1 tot 3 */
    grid-row: 1 / 2;    /* Van rijlijn 1 tot 2 */
}
```