In het 5e jaar heb je geleerd hoe je met display: grid, grid-template-columns en gap een basisraster opbouwt. Dat is fantastisch voor eenvoudige pagina's, maar modern webdesign vraagt om veel flexibelere, complexere en slimmere structuren.
In deze geavanceerde les tillen we jouw CSS Grid-kennis naar een professioneel niveau. Je leert hoe je complete pagina-indelingen visualiseert als 'ASCII-art' met grid-template-areas, hoe je de magische minmax()-functie combineert met repeat(), en hoe je dankzij auto-fit en auto-fill volledig responsieve lay-outs bouwt zonder één enkele @media query!
grid-template-areasIn plaats van te rekenen met kolomnummers, kun je met grid-template-areas je complete pagina-indeling uittekenen met namen. Dit maakt je CSS extreem overzichtelijk en gemakkelijk te lezen.
grid-area.grid-template-areas door de namen in een virtueel raster te 'tekenen'.<div class="page-layout">
<header class="header-area">Header</header>
<aside class="sidebar-area">Zijbalk</aside>
<main class="content-area">Hoofdinhoud</main>
<footer class="footer-area">Footer</footer>
</div>
/* 1. Koppel unieke namen aan de elementen */
.header-area { grid-area: header; }
.sidebar-area { grid-area: sidebar; }
.content-area { grid-area: main; }
.footer-area { grid-area: footer; }
/* 2. Teken de lay-out op de ouder-container */
.page-layout {
display: grid;
grid-template-columns: 250px 1fr; /* 250px zijbalk, rest voor inhoud */
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
gap: 16px;
}
Tip: Wil je een vakje leeg laten in je raster? Gebruik dan een puntje (.) in de string vangrid-template-areas, bijvoorbeeld:"header . header".
grid-template-areasHet grote voordeel van deze methode is dat je voor mobiele schermen enkel de grid-template-areas hoeft te herschrijven:
/* Mobiele lay-out: Alles strak onder elkaar */
@media (max-width: 768px) {
.page-layout {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
}
minmax()De CSS-functie minmax() geeft een element een dynamisch bereik. Je geeft twee waarden op: een minimale grootte en een maximale grootte.
grid-template-columns: minmax(200px, 1fr);
200px (voorkomt dat inhoud onleesbaar in elkaar drukt).1fr (een evenredig deel van de overgebleven ruimte).auto-fill vs auto-fitNormaal geef je bij repeat() exact aan hoeveel kolommen je wilt, zoals repeat(3, 1fr). Met de trefwoorden auto-fill en auto-fit laat je de browser zelf berekenen hoeveel kolommen er op het scherm passen.
Beide trefwoorden maken nieuwe kolommen aan zodra er ruimte voor is, maar ze reageren anders wanneer er minder items zijn dan beschikbare kolommen:
/* Voorbeeld met auto-fill */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* Voorbeeld met auto-fit */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
auto-fill (Aanvullen): Maakt zoveel mogelijk kolommen van minimaal $200\text{px}$ aan, ook als die kolommen leeg blijven. De bestaande items behouden hun minimale breedte.auto-fit (Passend maken): Maakt ook kolommen aan, maar stort lege kolommen in ($0\text{px}$) en rekt de aanwezige items uit om de volledige breedte van de container netjes op te vullen.AUTO-FILL (Behoudt lege lege rastervakken):
┌───────────┬───────────┬───────────┬───────────┐
│ Item 1 │ Item 2 │ (Leeg) │ (Leeg) │
└───────────┴───────────┴───────────┴───────────┘
AUTO-FIT (Rekt bestaande items uit over de volledige breedte):
┌───────────────────────┬───────────────────────┐
│ Item 1 │ Item 2 │
└───────────────────────┴───────────────────────┘
Door repeat(), auto-fit en minmax() te combineren, maak je een volledig responsief kaartengrid dat zich op élk schermformaat (van smartphone tot ultrawide monitor) automatisch aanpast, zonder dat je een enkele media query nodig hebt!
.responsive-grid {
display: grid;
/* De magische formule */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
Hoe deze formule werkt:
1. minmax(280px, 1fr): Elke kaart is minimaal $280\text{px}$ breed. Op een scherm van $320\text{px}$ past er 1 kolom. Op een scherm van $1200\text{px}$ passen er meerdere!
2. auto-fit: Als er ruimte is voor 4 kaarten, maakt de browser 4 kolommen. Krimp je het scherm in, dan 'springen' de kaarten automatisch naar de volgende rij.
3. 1fr: Zorgt ervoor dat de kaarten de overgebleven ruimte op de huidige rij netjes verdelen.
In dit voorbeeld bouwen we een dashboard waarin we grid-template-areas combineren met een vloeibaar auto-fit kaartengrid.
index.html)<div class="dashboard">
<header class="dashboard__header">
<h1>Design Dashboard</h1>
</header>
<aside class="dashboard__sidebar">
<nav>
<ul>
<li><a href="#">Overzicht</a></li>
<li><a href="#">Projecten</a></li>
<li><a href="#">Statistieken</a></li>
<li><a href="#">Instellingen</a></li>
</ul>
</nav>
</aside>
<main class="dashboard__main">
<h2>Recente Projecten</h2>
<div class="card-grid">
<article class="card">
<h3>UI Kit V2</h3>
<p>Status: In behandeling</p>
</article>
<article class="card">
<h3>Branding Logo</h3>
<p>Status: Afgerond</p>
</article>
<article class="card">
<h3>Poster Design</h3>
<p>Status: Concept</p>
</article>
<article class="card">
<h3>Webshop Redesign</h3>
<p>Status: In behandeling</p>
</article>
</div>
</main>
<footer class="dashboard__footer">
<p>© 2026 Grafische Technieken - Viso</p>
</footer>
</div>
style.css)/* Reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Inter', system-ui, sans-serif;
background-color: #f1f5f9;
color: #0f172a;
}
/* 1. DASHBOARD LAYOUT MET AREAS */
.dashboard {
display: grid;
min-height: 100vh;
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
/* Areas toewijzen */
.dashboard__header { grid-area: header; }
.dashboard__sidebar { grid-area: sidebar; }
.dashboard__main { grid-area: main; }
.dashboard__footer { grid-area: footer; }
/* Styling van de componenten */
.dashboard__header {
background-color: #0f172a;
color: #ffffff;
padding: 20px 32px;
}
.dashboard__sidebar {
background-color: #1e293b;
color: #94a3b8;
padding: 32px 20px;
}
.dashboard__sidebar ul {
list-style: none;
}
.dashboard__sidebar a {
color: #cbd5e1;
text-decoration: none;
display: block;
padding: 10px 0;
transition: color 0.2s;
}
.dashboard__sidebar a:hover {
color: #38bdf8;
}
.dashboard__main {
padding: 32px;
}
.dashboard__main h2 {
margin-bottom: 24px;
}
.dashboard__footer {
background-color: #e2e8f0;
text-align: center;
padding: 16px;
font-size: 0.875rem;
color: #64748b;
}
/* 2. VLOEIBAAR CARD GRID (ZONDER MEDIA QUERIES!) */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}
.card {
background-color: #ffffff;
padding: 24px;
border-radius: 12px;
border: 1px solid #cbd5e1;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
.card h3 {
font-size: 1.1rem;
margin-bottom: 8px;
color: #2563eb;
}
/* 3. RESPONSIEF MAKEN VOOR MOBIEL */
@media (max-width: 768px) {
.dashboard {
grid-template-columns: 1fr;
grid-template-areas:
"header"
"sidebar"
"main"
"footer";
}
}
grid-template-areas: Hiermee 'teken' je de visuele indeling van een pagina met namen in CSS (bijv. "header header").grid-area: Koppelt een specifiek HTML-element aan een benoemd vakje in grid-template-areas.minmax(min, max): Bepaalt een minimale en maximale grootte voor een rasterkolom of -rij.auto-fit: Maakt automatisch kolommen aan en rekt de aanwezige elementen uit om de container volledig op te vullen.auto-fill: Maakt automatisch kolommen aan, maar behoudt lege ruimtes als er te weinig elementen zijn.grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); maakt je kaartengrid $100\%$ responsief zonder media queries!