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.

<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

.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

.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.