H11 - Gridlayout

01 - Grid is layout in twee richtingen

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?

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

Actie

Maak een kleine grid-layout en pas dit onderdeel daarin toe.
Zet de grid-inspector in de browser aan en controleer of de cellen kloppen.

02 - De HTML: duidelijke onderdelen

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>Header</header>
    <nav>Navigatie</nav>
    <main>Hoofdinhoud</main>
    <aside>Zijbalk</aside>
    <footer>Footer</footer>
</body>

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

Actie

Maak een kleine grid-layout en pas dit onderdeel daarin toe.
Zet de grid-inspector in de browser aan en controleer of de cellen kloppen.

03 - Geef elk onderdeel een grid-area naam

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

header {
    grid-area: header;
}

nav {
    grid-area: nav;
}

main {
    grid-area: main;
}

aside {
    grid-area: aside;
}

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.

Actie

Maak een kleine grid-layout en pas dit onderdeel daarin toe.
Zet de grid-inspector in de browser aan en controleer of de cellen kloppen.

04 - Zet grid aan op de container

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: 200px 1fr 250px;
    grid-template-rows: auto 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.
auto betekent: neem zoveel ruimte als de inhoud nodig heeft.

Actie

Maak een kleine grid-layout en pas dit onderdeel daarin toe.
Zet de grid-inspector in de browser aan en controleer of de cellen kloppen.

05 - Layout tekenen met grid-template-areas

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

body {
    display: grid;
    grid-template-columns: 200px 1fr 250px;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "header header header"
        "nav    nav    nav"
        "main   main   aside"
        "footer footer footer";
}

De eerste rij bestaat uit drie keer header, dus de header loopt over drie kolommen.
De tweede rij is volledig nav.
De derde rij heeft twee cellen main en één cel aside.
De vierde rij is volledig footer.

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

Actie

Maak een kleine grid-layout en pas dit onderdeel daarin toe.
Zet de grid-inspector in de browser aan en controleer of de cellen kloppen.

06 - De punt betekent: lege cel

Soms wil je een cel niet gebruiken. Daarvoor gebruik je een punt: ..

body {
    display: grid;
    grid-template-columns: 200px 1fr 250px;
    grid-template-areas:
        "header header header"
        "nav    nav    nav"
        ".      main   aside"
        "footer footer footer";
}

De punt betekent: hier komt geen named area.
De cel blijft bestaan, maar je plaatst er geen onderdeel in.
Dit kan handig zijn als je bewust ruimte wilt laten.
Elke rij moet evenveel cellen hebben.

Let op: als je drie kolommen hebt, moet elke regel in grid-template-areas ook drie woorden of punten hebben.

Actie

Maak een kleine grid-layout en pas dit onderdeel daarin toe.
Zet de grid-inspector in de browser aan en controleer of de cellen kloppen.

07 - Volledig basisvoorbeeld

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

<body>
    <header>Header</header>
    <nav>Navigatie</nav>
    <main>Hoofdinhoud</main>
    <aside>Zijbalk</aside>
    <footer>Footer</footer>
</body>

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-columns: 200px 1fr 250px;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
        "header header header"
        "nav    nav    nav"
        "main   main   aside"
        "footer footer footer";
    gap: 16px;
}

header {
    grid-area: header;
}

nav {
    grid-area: nav;
}

main {
    grid-area: main;
}

aside {
    grid-area: aside;
}

footer {
    grid-area: footer;
}

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.

Actie

Maak een kleine grid-layout en pas dit onderdeel daarin toe.
Zet de grid-inspector in de browser aan en controleer of de cellen kloppen.

08 - Grid zichtbaar maken in de browser

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

Open de pagina in Firefox.
Klik met de rechtermuisknop op de pagina en kies Inspecteren.
Selecteer het element waarop display: grid staat, bijvoorbeeld body.
Zoek in de inspector naar het woord grid of naar het grid-icoon.
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

Open de pagina in Chrome of Edge.
Klik met de rechtermuisknop op de pagina en kies Inspecteren.
Selecteer het grid-element.
Klik in het tabblad Elements of Styles op het grid-icoon.
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.

Actie

Maak een kleine grid-layout en pas dit onderdeel daarin toe.
Zet de grid-inspector in de browser aan en controleer of de cellen kloppen.

09 - Best practices

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.

Actie

Maak een kleine grid-layout en pas dit onderdeel daarin toe.
Zet de grid-inspector in de browser aan en controleer of de cellen kloppen.

10 - Opdracht

Actie

Maak een pagina-layout met CSS Grid en named grid areas.

Speel eerst minimaal de eerste tien levels van CSS Grid Garden.
Maak een HTML-pagina met <header>, <nav>, <main>, <aside> en <footer>.
Geef elk onderdeel in CSS een grid-area naam.
Zet display: grid op de container.
Maak drie kolommen met grid-template-columns.
Maak minimaal vier rijen met grid-template-rows.
Teken de layout met grid-template-areas.
Gebruik minimaal één punt . voor een lege cel.
Voeg gap toe voor ruimte tussen de vakken.
Controleer je layout met de grid-overlay in Firefox, Chrome of Edge.

Quiz