CSS Grid

Wat ga je leren?

Je leert hoe je een twee-dimensionale layout bouwt met CSS Grid — rijen én kolommen tegelijk, zonder geneste flexboxen.

Theorie

In Flexbox gebruikte je Flexbox om elementen op één lijn te zetten (rij óf kolom). CSS Grid kun je gebruiken om elementen in een rooster te plaatsen — rijen én kolommen tegelijk.

Je activeert Grid met display: grid op de container:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;  /* drie even brede kolommen */
  gap: 10px;
}

Alle directe kinderen van de container worden grid-items en worden automatisch over de kolommen verdeeld.

Belangrijke eigenschappen

Eigenschap	Wat het doet
grid-template-columns	Definieert de kolommen (breedtes)
grid-template-rows	Definieert de rijen (hoogtes)
gap	Ruimte tussen rijen en kolommen
grid-column: span 2	Een item neemt 2 kolommen in beslag

De fr-eenheid

fr staat voor fraction — een deel van de beschikbare ruimte. 1fr 1fr 1fr betekent: drie even grote kolommen. 1fr 2fr betekent: kolom 2 is dubbel zo breed als kolom 1.

grid-template-columns: 1fr 2fr;   /* 1/3 en 2/3 van de breedte */
grid-template-columns: 200px 1fr; /* kolom 1 vast, kolom 2 vult de rest */

Grid vs Flexbox — wanneer wat?

• Flexbox: elementen op één lijn (menubalk, knoppenrij, kaartjes naast elkaar).
• Grid: een echt rooster (foto-galerij, dashboard, complete pagina-layout).

Ze zijn complementair — je kunt ze prima combineren.

Predict

Wat denk je dat dit doet?

.galerij {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

Met zes items in .galerij:

Klik hier voor het antwoord

Drie kolommen, dus de zes items vormen automatisch twee rijen van drie. CSS Grid breekt zelf naar een nieuwe rij zodra de kolommen vol zijn. De gap geeft 8px ruimte tussen alle items (horizontaal én verticaal).

Probeer en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Verander 1fr 1fr 1fr in 1fr 1fr. Wat gebeurt er met de zes cellen?
   Antwoord

   Ze staan nu in twee kolommen en drie rijen. Na elke twee cellen is een rij vol en begint de volgende.
2. Verander 1fr 1fr 1fr in 200px 1fr 200px en kies daarna boven het voorbeeld Breed. Wat verandert er?
   Antwoord

   De buitenste kolommen zijn altijd 200 pixels breed, de middelste krijgt wat overblijft. In het smalle voorbeeld past dat niet en steekt het raster rechts uit. Op Breed is de middelste kolom juist de breedste.
3. Voeg onderaan de CSS .cel:first-child { grid-column: span 2; } toe. Wat doet de eerste cel nu?
   Antwoord

   Cel 1 is twee kolommen breed. Cel 2 past er nog naast, de rest schuift op, en cel 6 staat alleen op een derde rij.
4. Verander 1fr 1fr 1fr in repeat(3, 1fr). Wat zie je?
   Antwoord

   Precies hetzelfde als eerst. repeat(3, 1fr) is een kortere schrijfwijze voor drie keer 1fr.

Editor laden...

Modify

Opdracht: Maak de eerste cel zo breed dat hij alle drie de kolommen vult (als een header bovenaan).

Editor laden...

Tip

Gebruik grid-column: 1 / -1 (van eerste tot laatste lijn) op de eerste cel. Of span 3.

Antwoord

.cel:first-child {
  grid-column: 1 / -1;
  background-color: orange;
}

Make

Opdracht: Bouw een eenvoudig dashboard-rooster: een brede header bovenaan (3 kolommen breed), daaronder een sidebar (1 kolom) naast de hoofdinhoud (2 kolommen), en een footer onderaan (3 kolommen breed).

Editor laden...

Tip

Vier elementen, drie kolommen. Header en footer: grid-column: 1 / -1. Sidebar: 1 kolom. Hoofdinhoud: grid-column: span 2.

Antwoord

<div class="dashboard">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="inhoud">Inhoud</div>
  <div class="footer">Footer</div>
</div>

.dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px;
}

.dashboard > div {
  background-color: #eef;
  padding: 30px;
  text-align: center;
}

.header, .footer {
  grid-column: 1 / -1;
  background-color: #4a90e2;
  color: white;
}

.inhoud {
  grid-column: span 2;
}

Er gaat iets mis

Geen gap, maar margin op de items

/* Werkt minder fijn dan gap */
.cel {
  margin: 10px;
}

Met margin op de items krijg je dubbele ruimte tussen items (margin links + margin rechts) en geen ruimte aan de buitenkant. gap werkt voor zowel rij- als kolom-tussenruimte met één regel:

.galerij {
  display: grid;
  gap: 10px;   /* één eigenschap voor alles */
}