⬛ Grid
Home / CSS-track / Les 7

⬛ Grid

Les 7 van 12 · ~30 min · CSS-track

Stap 1 van 7

CSS Grid is voor twee-dimensionale lay-out: rijen én kolommen tegelijk. Waar Flexbox één as regelt, regelt Grid beide assen. Hiermee bouw je complete paginalay-outs, fotogalerijen en dashboard-interfaces — zonder hacks.

Grid aanzetten en kolommen definiëren

.container {
  display: grid;

  /* Kolommen definiëren */
  grid-template-columns: 200px 200px 200px; /* 3 vaste kolommen */
  grid-template-columns: 1fr 1fr 1fr;       /* 3 gelijke kolommen */
  grid-template-columns: repeat(3, 1fr);    /* zelfde als hierboven ⭐ */
  grid-template-columns: 250px 1fr;         /* vaste sidebar + flexibele content */
  grid-template-columns: repeat(3, minmax(200px, 1fr)); /* min 200px, daarna gelijk */

  /* Rijen definiëren (vaak niet nodig – grid maakt ze automatisch) */
  grid-template-rows: auto 1fr auto; /* header – content – footer */

  /* Ruimte tussen cellen */
  gap: 16px;           /* rij-gap + kolom-gap gelijk */
  gap: 8px 16px;       /* rij-gap  kolom-gap */
  row-gap: 8px;
  column-gap: 16px;
}

Voorbeeld: repeat(3, 1fr) met gap: 12px

1
2
3
4
5
6

fr-eenheden, repeat() en minmax()

fr — fractional unit

fr is een breukdeel van de beschikbare ruimte, na aftrek van vaste breedtes en gap. Handig: 1fr 2fr = 33% en 67%.

1fr
2fr

repeat()

/* Handmatig */
grid-template-columns: 1fr 1fr 1fr 1fr;

/* Met repeat */
grid-template-columns: repeat(4, 1fr);

/* Auto-fill: zoveel kolommen als passen */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

minmax() ⭐

minmax(min, max) geeft een kolom een minimum- en maximumbreedte. In combinatie met auto-fill het responsieve grid-patroon bij uitstek — geen media queries nodig! 

.galerij {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
/* Kolommen zijn minimaal 200px breed.
   Bij meer ruimte groeien ze mee.
   Bij minder ruimte vallen er minder naast elkaar. */

Items over meerdere kolommen/rijen spannen

Met grid-column en grid-row laat je een item meerdere cellen innemen. 

.item {
  /* Lijn-nummers: 1 = eerste lijn, -1 = laatste lijn */
  grid-column: 1 / 3;    /* van lijn 1 tot lijn 3 = 2 kolommen breed */
  grid-column: 1 / -1;   /* van eerste tot laatste lijn = volle breedte */
  grid-column: span 2;   /* span 2 kolommen vanaf huidige positie ⭐ */

  grid-row: 1 / 3;       /* span 2 rijen */
  grid-row: span 2;
}
span 2 kolommen
span 2 rijen
normaal
normaal

grid-template-areas — naamgeving

.pagina {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    "header  header"
    "sidebar content"
    "footer  footer";
}
header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
main    { grid-area: content; }
footer  { grid-area: footer; }

Uitlijning in Grid

Grid heeft dezelfde uitlijn-properties als Flexbox, maar dan voor beide assen tegelijk.

Property Op Wat doet het
justify-itemscontainerItems horizontaal binnen hun cel
align-itemscontainerItems verticaal binnen hun cel
justify-contentcontainerVerdeel grid-tracks horizontaal
align-contentcontainerVerdeel grid-tracks verticaal
justify-selfitemDit item horizontaal in zijn cel
align-selfitemDit item verticaal in zijn cel
place-itemscontaineralign-items + justify-items in één ⭐
 
/* Perfect centreren in een cel (of viewport) */
.centrer {
  display: grid;
  place-items: center;
  height: 100vh;
}

Grid vs Flexbox: wanneer gebruik je wat?

🔲 Flexbox

  • Één richting (rij of kolom)
  • Items bepalen grootte
  • Navigatiebalk, toolbar
  • Knoppen naast elkaar
  • Items die wrappen
  • Centreren van één item

⬛ Grid

  • Twee dimensies tegelijk
  • Lay-out bepaalt grootte
  • Volledige paginalay-out
  • Fotogalerij / kaartengrid
  • Dashboard
  • Items over cellen spannen
Vuistregel: Begin met de lay-out in je hoofd. Is het een rij of kolom? → Flexbox. Is het een raster? → Grid. In de praktijk gebruik je beide: Grid voor de grote structuur, Flexbox voor de elementen daarbinnen.

Oefening 1 – Fotogalerij

Maak een responsieve fotogalerij met auto-fill:
• body: margin 0, padding 24px, background #0f172a, font-family sans-serif
• .galerij: display grid, grid-template-columns repeat(auto-fill, minmax(120px, 1fr)), gap 12px
• .foto: background #1e293b, border-radius 8px, aspect-ratio 1, display flex, align-items center, justify-content center, color #94a3b8, font-size 24px

CSS

HTML

<div class="galerij">
  <div class="foto">🌅</div>
  <div class="foto">🌊</div>
  <div class="foto">🏔️</div>
  <div class="foto">🌲</div>
  <div class="foto">🌸</div>
  <div class="foto">🦋</div>
</div>

Live voorbeeld

Oefening 2 – Paginalay-out met grid-areas

Bouw een klassieke header/sidebar/content/footer-lay-out:
• body: margin 0, font-family sans-serif, min-height 100vh, display grid, grid-template-columns 200px 1fr, grid-template-rows 50px 1fr 40px, grid-template-areas "header header" "sidebar content" "footer footer"
• header: grid-area header, background #0f172a, color #2dd4bf, display flex, align-items center, padding 0 16px, font-weight 700
• .sidebar: grid-area sidebar, background #1e293b, color #94a3b8, padding 16px, font-size 14px
• main: grid-area content, padding 16px, color #111827, background #f8fafc
• footer: grid-area footer, background #0f172a, color #475569, display flex, align-items center, padding 0 16px, font-size 12px

CSS

HTML

<header>⚡ MijnApp</header>
<div class="sidebar">
  <p>Menu item 1</p>
  <p>Menu item 2</p>
</div>
<main>
  <h1>Dashboard</h1>
  <p>Welkom terug!</p>
</main>
<footer>© 2026 MijnApp</footer>

Live voorbeeld

Quiz

⬛

Les 7 afgerond!

Grid beheerst! Je kunt nu volledige paginalay-outs bouwen. Volgende stap: responsive design.

Volgende: Responsive design →
← Flexbox Responsive →