# Opdracht: Layout Creëren met CSS Grid

### Stap 1: HTML Structuur Aanmaken

Maak een HTML bestand genaamd `grid.html` aan om de grid layout toe te passen. Vergeet niet een bijbehorend CSS bestand aan te maken en te koppelen.

```html
<body>
    <header>
        <h1>Mijn Website</h1>
    </header>
    <nav>
        <!-- Navigatie-inhoud -->
    </nav>
    <main class="grid-container">
        <section class="item item1">
            <!-- Inhoud Sectie 1 -->
        </section>
        <section class="item item2">
            <!-- Inhoud Sectie 2 -->
        </section>
        <aside class="item item3">
            <!-- Zijbalk of extra informatie -->
        </aside>
    </main>
    <footer>
        <!-- Footer-inhoud -->
    </footer>
</body>
```

### Stap 2: Aanpassen van je Inhoud

- **item1**: Plaats hier je hoofdinhoud, zoals een introductie.
- **item2**: Gebruik dit voor aanvullende inhoud, zoals hobby's of iets anders.
- **item3**: Gebruik de aside voor extra informatie of links.

### Stap 3: CSS Grid Implementeren

#### CSS voor de Grid Container

```css
.grid-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    grid-gap: 20px;
    margin: 20px;
}

```

**Uitleg:**

- **grid-template-columns: 2fr 1fr;**: Twee kolommen waarbij de eerste tweemaal zo breed is als de tweede.
- **grid-template-rows: auto;**: Rijen worden automatisch aangepast aan de inhoud.
- **grid-gap: 20px;**: Ruimte tussen de grid items.

#### CSS voor de Grid Items

```css
.item1 {
    grid-column: 1 / 2;
    grid-row: 1;
}

.item2 {
    grid-column: 1 / 2;
    grid-row: 2;
}

.item3 {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}
```

**Uitleg:**

- **item1** en **item2** staan in de eerste kolom.
- **item3** beslaat de tweede kolom en strekt zich uit over twee rijen.

Als je de webpagina bekijkt dan zouden de elementen gepositioneerd moeten zijn volgens het CSS Grid principe.

</body>