𝗖𝗦𝗦 𝗚𝗿𝗶𝗱 𝘃𝘀 𝗙𝗹𝗲𝘅𝗯𝗼𝘅
Stop met worstelen met je CSS-layouts.
Ik besteedde vroeger uren aan het repareren van kapotte layouts met Flexbox. Ik probeerde items in een rij te verpakken, maar het laatste item strekte zich over het hele scherm uit. Het zag er niet goed uit. Ik probeerde marges en extra hacks, maar niets werkte.
Toen stapte ik over op de mindset van CSS Grid.
Het verschil is simpel:
- Flexbox is voor eendimensionale layouts. Gebruik het voor een enkele rij of een enkele kolom.
- CSS Grid is voor tweedimensionale layouts. Gebruik het wanneer je zowel rijen als kolommen tegelijkertijd wilt beheren.
Zie Flexbox als een hulpmiddel voor kleine taken. Zie Grid als een hulpmiddel voor je volledige paginastructuur.
De Flexbox-val: Wanneer je Flexbox gebruikt voor een galerij, sluiten de items misschien niet perfect aan op elk schermformaat. Je eindigt vaak met 'orphan' items die het ritme van je ontwerp verstoren.
De Grid-oplossing: Met Grid kun je responsieve galerijen maken met één regel code.
Gebruik dit:
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
Dit vertelt de browser om zoveel mogelijk kolommen van 250px te plaatsen. De browser doet het rekenwerk voor je. Geen giswerk meer. Geen kapotte rijen meer.
Het Dashboard-voorbeeld: Het bouwen van een dashboard met een zijbalk, hoofdinhoud en een footer is lastig met Flexbox. Je hebt vaak geneste containers en rommelige code nodig om een footer over de volledige breedte te laten lopen.
Met Grid definieer je de tracks één keer:
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
Je kunt de footer met één commando laten spannen van de eerste kolom tot de laatste kolom. Je code wordt schoon en gemakkelijk leesbaar.
Mijn advies:
• Gebruik Flexbox voor eenvoudige uitlijningen in headers of knoppen. • Gebruik Grid voor de belangrijkste paginalayouts en complexe galerijen. • Stop met het nesten van containers alleen maar om een layoutprobleem op te lossen. • Gebruik de fr-eenheid om eenvoudig ruimte te verdelen.
Probeer dit vandaag nog. Pak een oud component dat je met Flexbox hebt gebouwd. Schrijf het opnieuw met CSS Grid. Je zult zien dat je code korter wordt en je layouts sterker worden.