Skip to main content

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.

Back to top