⏱️ Leestijd: ca. 5 min.

Basis CSS Grid

In de vorige lessen heb je gewerkt met Flexbox: een fantastische manier om elementen in één richting (een rij óf een kolom) uit te lijnen. Maar wat als je een complete pagina wilt indelen in rijen én kolommen tegelijk, zoals een krantenlay-out, een fotogalerij of een dashboard?

Daarvoor gebruiken we CSS Grid Layout. Waar Flexbox één-dimensionaal (1D) werkt, is CSS Grid een krachtig twee-dimensionaal (2D) lay-outsysteem.

Bovendien is het begrijpen van CSS Grid de perfecte opstap naar moderne CSS-frameworks zoals Bootstrap, die volledig draaien op het idee van een onzichtbaar stramien of raster.

1. Wat is CSS Grid?

Met CSS Grid verdeel je de pagina in een virtueel raster met horizontale rijen (rows) en verticale kolommen (columns). HTML-elementen plaats je vervolgens precies in de gewenste vakjes van dit raster.

       KOLOM 1       KOLOM 2       KOLOM 3
    ┌─────────────┬─────────────┬─────────────┐
RIJ 1│  Vakje 1    │  Vakje 2    │  Vakje 3    │
    ├─────────────┼─────────────┼─────────────┤
RIJ 2│  Vakje 4    │  Vakje 5    │  Vakje 6    │
    └─────────────┴─────────────┴─────────────┘

Het grootste voordeel? Je hoeft niet langer elk element los af te wegen met marges of positioneringen. De ouder-container bepaalt het complete raster, en de onderliggende elementen volgen automatisch!

2. De Grid Activeren: display: grid

Net zoals bij Flexbox begint alles bij het bovenliggende element (de parent container). Door op een container de eigenschap display: grid; toe te passen, verander je deze in een Grid Container.

<div class="raster-container">
    <div class="kaart">1</div>
    <div class="kaart">2</div>
    <div class="kaart">3</div>
</div>

.raster-container {
    display: grid; /* Activeert CSS Grid op het moederelement */
}
Let op: Zonder verdere instellingen zet de browser alle onderliggende elementen simpelweg strak onder elkaar in één grote kolom. Om écht stramienen te maken, moeten we kolommen gaan definiëren!

3. Kolommen definiëren: grid-template-columns

Met de eigenschap grid-template-columns geef je aan hoeveel kolommen je wilt en hoe breed elke kolom moet zijn.

A. Vaste maten (px of %)

Je kunt exacte waarden opgeven per kolom, gescheiden door een spatie:

.raster-container {
    display: grid;
    /* Maakt 3 kolommen: de eerste is 200px, de tweede 400px, de derde 200px */
    grid-template-columns: 200px 400px 200px;
}

B. De flexibele eenheid: fr (Fractional Unit)

CSS Grid introduceert een hele slimme nieuwe eenheid: de fr (fractional unit). Eén fr staat voor één deel van de overgebleven vrije ruimte in de container.

.raster-container {
    display: grid;
    /* Maakt 3 exact gelijke kolommen die zich flexibel aanpassen aan het scherm! */
    grid-template-columns: 1fr 1fr 1fr;
}

Wil je een asymmetrische lay-out maken (bijvoorbeeld een smalle zijbalk en een groot inhoudsvak)?

.raster-container {
    display: grid;
    /* De tweede kolom is 3x zo breed als de eerste kolom */
    grid-template-columns: 1fr 3fr;
}

C. Herhaling verkorten met repeat()

Als je veel identieke kolommen nodig hebt, hoef je niet steeds 1fr 1fr 1fr... te typen. Gebruik daarvoor de handige functie repeat():

.raster-container {
    display: grid;
    /* Maakt exact 4 gelijke kolommen van 1fr breed */
    grid-template-columns: repeat(4, 1fr);
}

4. Ruimte tussen de vakjes: gap

In plaats van te knoeien met losse buitenruimtes (margin) rondom individuele kaarten, gebruik je gap op de container om een strakke tussenruimte (de gutter) in te stellen tussen alle rijen en kolommen.

.raster-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px; /* Biedt 20px tussenruimte tussen ALLE rastervakken */
}
Tip: Wil je een andere afstand tussen de rijen dan tussen de kolommen? Dan kun je row-gap en column-gap los van elkaar instellen!

5. CSS Grid als opstap naar Bootstrap

In het werkveld als grafisch en digitaal vormgever werk je later heel vaak met frameworks zoals Bootstrap. Bootstrap is een professionele verzameling van kant-en-klare CSS-bouwstenen die wereldwijd door webdevelopers gebruikt wordt.

Het hart van Bootstrap is het 12-kolommenstramien:

┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┐
│ 1 │ 2 │ 3 │ 4 │ 5 │ 6 │ 7 │ 8 │ 9 │10 │11 │12 │
└───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┴───┘

Door nu te leren denken in CSS Grid, begrijp je precies de logica van Bootstrap:

Wanneer je de basis van CSS Grid beheerst, wordt het bouwen van responsieve pagina's in Bootstrap later kinderspel.

6. Compleet Praktijkvoorbeeld: Een Portfolio Grid

Hieronder bouwen we een overzichtelijke portfolio-lay-out met een strak raster van drie kolommen.

HTML (index.html)

<main class="portfolio-container">
    <article class="card">
        <h3>Project 1: Logo Design</h3>
        <p>Een strakke merkidentiteit ontworpen in Illustrator.</p>
    </article>

    <article class="card">
        <h3>Project 2: Typografie</h3>
        <p>Posterontwerp gericht op moderne schreefletters.</p>
    </article>

    <article class="card">
        <h3>Project 3: UI Prototype</h3>
        <p>Een interactieve mobiele app ontworpen in Figma.</p>
    </article>

    <article class="card">
        <h3>Project 4: Verpakking</h3>
        <p>Duurzaam doosontwerp met opvallende kapvorm.</p>
    </article>

    <article class="card">
        <h3>Project 5: Animatie</h3>
        <p>Korte 2D-motion graphic voor sociale media.</p>
    </article>

    <article class="card">
        <h3>Project 6: Webdesign</h3>
        <p>Responsieve landing page gebouwd met CSS Grid.</p>
    </article>
</main>

CSS (style.css)

/* Algemene instellingen */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f1f5f9;
    padding: 40px 20px;
}

/* De Grid Container */
.portfolio-container {
    display: grid;
    /* Drie gelijke kolommen die de volledige beschikbare ruimte verdelen */
    grid-template-columns: repeat(3, 1fr); 
    gap: 24px; /* Tussenruimte van 24px tussen alle kaarten */
    max-width: 1100px;
    margin: 0 auto;
}

/* Stijl voor de individuele kaarten */
.card {
    background-color: #ffffff;
    padding: 24px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.card h3 {
    color: #0f172a;
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.card p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.5;
}

Samenvatting