CSS Grid en Flexbox zijn twee layoutmethodes in CSS waarmee je complexe en flexibele designs voor het web bouwt. Ze overlappen op punten, maar hebben elk eigen mogelijkheden en eigen ideale toepassingen. In deze vergelijking CSS Grid vs. Flexbox lopen we de voor- en nadelen van allebei door en kijken we wanneer het een boven het ander gaat.
Display Grid
Display Grid is een layoutsysteem voor rastergebaseerde designs. Je definieert rijen en kolommen op je pagina en plaatst elementen binnen die rijen en kolommen. Daarmee kun je de elementen van je pagina samenhangend en gestructureerd uitlijnen en ordenen.
Hier een HTML/CSS-voorbeeld dat met CSS Grid een raster van 3 kolommen en 3 rijen maakt:
HTML-code Grid
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>CSS-code Grid
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 1rem;
border: 1px dashed #000;
padding: 5px;
}
.grid-item {
background: #e74c3c;
padding: .5rem;
color: white;
text-align: center;
}Display Flex
Flexbox is een layoutsysteem voor flexibele layouts die zich aanpassen aan wisselende scherm- en containerformaten. Je stelt relatieve afmetingen in voor de elementen van je layout en lijnt ze precies uit.
Nog een HTML/CSS-voorbeeld, deze keer met Flexbox om uit te lijnen:
HTML-code Flex
<div class="flex-container">
<div class="flex-item">Logo</div>
<div class="flex-item">Menu</div>
<div class="flex-item">Champ de Recherche</div>
</div>CSS-code Flex
.flex-container {
display: flex;
justify-content: center;
gap: 1rem;
border: 1px dashed #000;
padding: 5px;
}
.flex-item {
border: 1px dashed #e74c3c;
padding: 10px;
}Flex en Grid naast elkaar
CSS Grid vs. Flexbox: hier is dezelfde markup, deze keer met Grid. Het verschil in relatieve grootte van de elementen spreekt voor zich.
HTML-code Grid vs. Flex
<div class="grid-container">
<div class="grid-item">Logo</div>
<div class="grid-item">Menu</div>
<div class="grid-item">Champ de Recherche</div>
</div>De grote ruimte tussen het voorbeeld en de HTML-code is geen bug van je browser. We hebben ons raster 3 kolommen en 3 rijen opgelegd, en het raster houdt zich hoe dan ook aan die structuur. Display Grid volgt de in CSS opgegeven structuur naar de letter, zelfs als er helemaal geen kindelementen .grid-item zijn!
CSS Grid of Flexbox: wanneer kies je wat?
Wie de sterke en zwakke punten van beide tools kent, kiest het gereedschap dat bij zijn project past. In grote lijnen is CSS Grid ideaal voor rastergebaseerde designs, zoals portfolio’s en fotogalerijen, terwijl Flexbox ideaal is voor flexibele, responsive designs, zoals flex-menu’s en toolbars.
Een voorbeeld maakt het duidelijker: stel dat je de layout bouwt voor de homepage van een e-commercesite. Die moet afbeeldingen van uitgelichte producten bevatten, secties voor productcategorieën, een navigatiebalk en een zoekformulier. In dat geval zou je CSS Grid kunnen nemen om de afbeeldingen van de uitgelichte producten in een raster te ordenen, en Flexbox om de categoriesecties, de navigatiebalk en het zoekformulier netjes uit te lijnen.
Goed om te weten: de twee tools kunnen ook samen worden ingezet om nog geavanceerdere designs te bouwen. Je zou bijvoorbeeld met CSS Grid een raster van kolommen en rijen kunnen opzetten en vervolgens met Flexbox de elementen binnen elke cel uitlijnen. Zo combineer je de voordelen van beide tools tot designs die nog krachtiger en flexibeler zijn.
Kort gezegd: CSS Grid is het juiste gereedschap voor rastergebaseerde designs zoals portfolio’s en fotogalerijen, Flexbox het juiste voor flexibele, responsive designs zoals flexbox-menu’s en toolbars. Zet je ze samen in, dan kom je tot nog geavanceerdere designs die aansluiten op wat je project nodig heeft.
