Flexbox- en Grid-generator

Hoe je dit gebruikt Flexbox- en Grid-generator

1. Kies Flexbox of Grid, afhankelijk van je situatie.
2. Stel richting, verdeling en tussenruimte in.
3. Kopieer de resulterende CSS.

Welke kiezen: de vuistregel

Het korte antwoord: Flexbox voor één dimensie, Grid voor twee.

Flexbox verdeelt elementen langs één as. Dat is de natuurlijke keuze voor een navigatiebalk, een rij knoppen, een kaart met icoon en tekst, of alles wat op één lijn uitlijnt.

Grid definieert rijen en kolommen tegelijk. Dat is de natuurlijke keuze voor de opzet van een pagina, een galerij, een dashboard of een formulier met uitgelijnde labels.

Een andere manier om te beslissen: moet de grootte van de elementen de indeling bepalen, dan Flexbox. Moet de indeling de elementen bepalen, dan Grid.

Ze concurreren niet. In een echt project gebruik je Grid voor de opzet en Flexbox binnen elke cel.

En een aanbeveling die veel code scheelt: gebruik de eigenschap gap in beide in plaats van marges tussen elementen. Die voorkomt het klassieke probleem van het laatste element met een overtollige marge en werkt in beide systemen gelijk.

Grid zonder mediaqueries

De nuttigste mogelijkheid van Grid is tegelijk de minst bekende.

De combinatie repeat(auto-fit, minmax(250px, 1fr)) maakt een raster dat zelf het aantal kolommen aanpast aan de beschikbare breedte, zonder ook maar één mediaquery.

Elke kolom wordt minstens 250 pixels breed en rekt uit om de overgebleven ruimte te verdelen. Passen ze niet meer, dan gaat het raster vanzelf naar een kolom minder.

Het verschil tussen auto-fit en auto-fill zit in wat er met overtollige kolommen gebeurt: auto-fit klapt ze in en rekt de rest uit, auto-fill houdt ze leeg. Voor een galerij wil je vrijwel altijd auto-fit.

Met grid-template-areas kun je bovendien zones benoemen en de opzet leesbaar uittekenen, en dan alleen die zones herdefiniëren om de indeling op mobiel te veranderen.

Kijk ook naar containerqueries: daarmee reageert een component op de breedte van zijn container in plaats van die van het venster, wat je eigenlijk bijna altijd wilde.

De gebruikelijke fouten

Dingen waar vrijwel iedereen tijd aan verliest.

Een flex-element krimpt standaard niet onder de grootte van zijn inhoud, en daardoor lopen rasters met lange teksten of codeblokken over. De oplossing is min-width: 0 op het flex-element, of overflow: hidden.

Percentages in flex-basis worden op de hoofdas berekend, niet altijd op wat je verwacht. Voorspelbaarder is flex: 1 1 0 schrijven en de verdeling laten gebeuren.

Uitlijnen kent twee assen: justify-content op de hoofdas en align-items op de kruisas. In Flexbox met kolomrichting wisselen die assen om, en daar vergist iedereen zich een keer.

De visuele volgorde met order of grid-area verandert de DOM-volgorde niet. Wie met het toetsenbord of een schermlezer navigeert, volgt de volgorde van de code, dus visueel herschikken kan een pagina onbruikbaar maken. Pas het HTML aan in plaats van de CSS als de volgorde betekenis heeft.

En gelijke hoogtes in een rij kaarten vragen geen trucs meer: dat is het standaardgedrag van beide systemen.

Veelgestelde vragen