H11 - Gridlayout

De header komt bovenaan, de nav links, main in het midden, aside rechts en de footer onderaan. Body gebruikt grid; het menu en de footer blijven intern flexbox gebruiken. Je eerdere inhoud, achtergrond, kleurvariabelen en stylesheet blijven behouden.

Flexbox is vooral handig voor één richting: een rij of een kolom. CSS Grid is handig als je tegelijk met rijen en kolommen werkt. Denk aan een complete pagina met header, menu, inhoud, zijbalk en footer.

Net als bij flexbox is grid een lastig layout-onderdeel. Daarom gaan we niet alle grid-opties uit het hoofd leren. We gebruiken hier één overzichtelijke aanpak: onderdelen een naam geven en daarna een layout tekenen met grid-template-areas.

Wil je grid goed oefenen, speel dan CSS Grid Garden. Speel het spel. Het helpt om grid visueel te begrijpen.

Hoe speel je CSS Grid Garden?

1. Open cssgridgarden.com/#nl.
2. Je ziet wortels en water op een speelveld.
3. Je moet de wortels water geven met CSS Grid-regels.
4. In de CSS-editor typ je grid-regels.
5. Als de waterplek goed staat, ga je naar het volgende level.
6. Lees per level goed welke grid-property je oefent.
7. Speel rustig. Het doel is begrijpen, niet zo snel mogelijk klikken.

Voor een grid-layout heb je eerst duidelijke HTML-onderdelen nodig. Dit kunnen semantische HTML-tags zijn, zoals <header>, <nav>, <main>, <aside> en <footer>.

<body>
    <header class="site-header">Je bestaande naam en paginakop</header>
    <nav class="site-nav">Je bestaande menulijst</nav>
    <main class="site-main">
        <div class="pagina-breedte">Je bestaande pagina-inhoud</div>
    </main>
    <aside class="site-aside">Je bestaande aanvullende informatie</aside>
    <footer class="site-footer">Je bestaande twee alinea's en contactlink</footer>
</body>

De HTML blijft gewoon inhoud en structuur. De plaatsing doen we met CSS.

In CSS geef je elk HTML-element een naam met grid-area. Die naam gebruik je later in de layout-tekening.

.site-header { grid-area: header; }
.site-nav { grid-area: nav; }
.site-main { grid-area: main; min-width: 0; }
.site-aside { grid-area: aside; }
.site-footer { grid-area: footer; }

• De naam mag je zelf kiezen.
• Kies duidelijke namen, zoals header, nav, main, aside en footer.
• De naam in grid-area schrijf je zonder punt en zonder hekje.
• Deze namen zijn geen classnamen en geen id's. Het zijn grid-area namen.

De grid-layout zet je op de container waar de onderdelen direct in staan. In dit eenvoudige voorbeeld gebruiken we de body als grid container.

body {
    display: grid;
}

Daarna kun je rijen, kolommen en gebieden definiëren.

body {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 230px;
    grid-template-rows: auto 1fr auto;
}

• grid-template-columns bepaalt de kolommen.
• grid-template-rows bepaalt de rijen.
• 1fr gebruikt de grid-eenheid fr: één fractie van de beschikbare ruimte.
• minmax(0, 1fr) geeft de middenkolom de overgebleven ruimte en laat haar zo nodig kleiner worden.
• min-width: 0 op main voorkomt dat de minimale inhoudsbreedte de kolom onbedoeld blijft opduwen.
• auto laat de rijhoogte door de inhoud bepalen; de middelste rij kan met 1fr vrije hoogte gebruiken.

Met grid-template-areas teken je de layout als tekst. Elke regel tussen aanhalingstekens is een rij. Elk woord is een cel.

body {
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 230px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
    gap: 24px;
}

• De eerste rij bestaat uit drie keer header, dus de header loopt over drie kolommen.
• De tweede rij bevat nav, main en aside: de Holy Grail-indeling.
• De derde rij is volledig footer.

Dit is de kracht van named grid areas: je kunt de layout bijna lezen als een plattegrond.

Een punt in grid-template-areas betekent dat de cel geen benoemd gebied krijgt. Voor deze proef voegen we tijdelijk een lege rij toe, zodat alle bestaande onderdelen hun bestemming houden.

body {
    grid-template-rows: auto 1fr 40px auto;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        ".      .      ."
        "footer footer footer";
}

Elke rij heeft evenveel cellen. De derde rij laat hier 40px extra ruimte vrij. Alle vijf hoofdonderdelen blijven bij hun eigen named area. Onze eindlayout heeft deze lege rij niet nodig.

Dit is een compacte basis voor een pagina-layout met named grid areas.

<body>
    <header class="site-header">Je bestaande naam en paginakop</header>
    <nav class="site-nav">Je bestaande menulijst</nav>
    <main class="site-main">
        <div class="pagina-breedte">Je bestaande pagina-inhoud</div>
    </main>
    <aside class="site-aside">Je bestaande aanvullende informatie</aside>
    <footer class="site-footer">Je bestaande twee alinea's en contactlink</footer>
</body>

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 24px;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr) 230px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
    gap: 24px;
}

.site-header { grid-area: header; }
.site-nav { grid-area: nav; }
.site-main { grid-area: main; min-width: 0; }
.site-aside { grid-area: aside; }
.site-footer { grid-area: footer; }

.site-nav ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* De bestaande footer- en kaartflexbox, kleuren en achtergrond blijven staan. */

• min-height: 100vh laat de body minimaal de hoogte van het scherm gebruiken.
• gap maakt ruimte tussen de grid-vakken.
• De template bepaalt waar de onderdelen staan.

Een grid-layout is soms lastig te zien, omdat de lijnen en namen niet automatisch zichtbaar op de pagina staan. In de browser kun je de grid-lijnen tijdelijk zichtbaar maken met de ontwikkelaarstools.

Firefox

1. Open de pagina in Firefox.
2. Klik met de rechtermuisknop op de pagina en kies Inspecteren.
3. Selecteer het element waarop display: grid staat, bijvoorbeeld body.
4. Zoek in de inspector naar het woord grid of naar het grid-icoon.
5. Zet de grid-overlay aan.

• Firefox kan de grid-lijnen over de pagina tekenen.
• Je kunt de rijnummers en kolomnummers beter zien.
• Bij named grid areas kun je ook de indeling van je gebieden controleren.
• Dit verandert niets aan je HTML of CSS. Het is alleen een hulpmiddel in de browser.

Chrome en Edge

1. Open de pagina in Chrome of Edge.
2. Klik met de rechtermuisknop op de pagina en kies Inspecteren.
3. Selecteer het grid-element.
4. Klik in het tabblad Elements of Styles op het grid-icoon.
5. Gebruik de layout- of overlay-opties om de grid-lijnen zichtbaar te maken.

Dit is een goede manier om te controleren of jouw tekst-tekening in grid-template-areas overeenkomt met wat je in de browser ziet.

Je kunt eventueel ook tijdelijk opvallende achtergronden of borders aan je onderdelen geven. Dat is handig tijdens het bouwen, maar haal zulke testkleuren later weer weg.

header,
nav,
main,
aside,
footer {
    border: 2px solid red;
}

• De browser-overlay is meestal de netste optie.
• Tijdelijke borders zijn handig als je snel wilt zien waar elk onderdeel staat.
• Laat test-borders niet per ongeluk in je eindversie staan.

• Gebruik grid voor layout in twee richtingen: rijen en kolommen.
• Gebruik flexbox voor kleinere onderdelen in één richting.
• Gebruik duidelijke grid-area namen.
• Houd grid-template-areas overzichtelijk.
• Zorg dat elke regel in grid-template-areas evenveel cellen heeft.
• Gebruik een punt . voor een lege cel.
• Gebruik de grid-overlay in de browser om je layout te controleren.
• Speel CSS Grid Garden om meer grid-opties te oefenen.