CSS Grid eller Flexbox? Så väljer du rätt layoutverktyg

Den som bygger webbsidor i dag har två moderna layoutverktyg i CSS: Flexbox och CSS Grid. Båda stöds av alla större webbläsare, båda kan centrera innehåll och båda har egenskapen gap för mellanrum. Ändå löser de olika problem. I den här guiden går vi igenom skillnaden, när du ska välja vilket och hur du kombinerar dem i ett riktigt projekt.

Den viktigaste skillnaden: en eller två dimensioner

Flexbox är byggt för layout i en dimension. Du ordnar element antingen i en rad eller i en kolumn, och webbläsaren fördelar utrymmet längs den axeln. Om elementen bryts till en ny rad med flex-wrap behandlas varje rad för sig, så kolumnerna i rad två har ingen koppling till kolumnerna i rad ett.

CSS Grid arbetar i två dimensioner samtidigt. Du definierar rader och kolumner på föräldraelementet med grid-template-columns och grid-template-rows, och barnen placeras i ett rutnät där både höjd och bredd hänger ihop. Det gör Grid till det naturliga valet för hela sidlayouter, kortgallerier och formulär där etiketter och fält ska linjera.

Innehållet styr eller layouten styr

En annan praktisk tumregel handlar om vem som bestämmer storleken. Med Flexbox utgår man ofta från innehållet: knappar i en meny får den bredd texten kräver, och resten av utrymmet fördelas med flex-grow och flex-shrink. Med Grid bestämmer du först strukturen och låter sedan innehållet fylla rutorna. Enheten fr (en andel av ledigt utrymme) och funktionen minmax() gör det enkelt att skapa kolumner som är flexibla men aldrig för smala.

Ett vanligt mönster för responsiva kort är grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)). Webbläsaren räknar då själv ut hur många kolumner som får plats, utan en enda mediefråga.

När Flexbox är rätt val

Navigeringsfält och verktygsrader där länkar ska ligga på rad och logotypen skjutas åt vänster med margin-left: auto på sista elementet.
Knappgrupper och taggar som ska radbrytas naturligt när skärmen blir smalare.
Centrering av ett enskilt element med display: flex, justify-content: center och align-items: center.
Komponenter inuti ett kort, till exempel en rubrik, en text och en knapp som ska tryckas ned till kortets botten.

När CSS Grid är rätt val

Sidans grundstruktur med sidhuvud, sidofält, innehåll och sidfot. Med grid-template-areas kan du namnge ytorna och flytta om dem i en mediefråga.
Gallerier och produktlistor där alla kort ska ha samma bredd och linjera i både rader och kolumner.
Formulär där etiketterna ska stå i en kolumn och fälten i en annan.
Överlappande element, eftersom flera barn kan placeras i samma rutnätscell, något som annars kräver absolut positionering.

Subgrid löser ett gammalt problem

Ett klassiskt problem med kortlayouter är att rubriker av olika längd gör att texterna och knapparna i korten hamnar på olika höjd. Med grid-template-rows: subgrid kan ett kort ärva föräldrarutnätets rader, så att rubrik, text och knapp linjerar över alla kort. Subgrid fanns först i Firefox och har sedan 2023 stöd i alla större webbläsare enligt MDN och Can I use, så det går att använda i vanliga produktionsprojekt.

Kombinera dem i stället för att välja

I praktiken använder de flesta moderna webbplatser båda verktygen. Grid sköter den yttre strukturen, och Flexbox sköter detaljerna inne i varje komponent. Ett exempel är en bloggstartsida där artikellistan är ett Grid med tre kolumner på dator och en kolumn på mobil, medan varje artikelkort använder Flexbox i kolumnriktning så att ”Läs mer”-knappen alltid hamnar längst ned.

Vanliga misstag att undvika

Ett vanligt misstag är att bygga ett rutnät med Flexbox genom att ge varje element en procentuell bredd och negativa marginaler. Det var standard innan Grid fick brett stöd men ger i dag onödigt komplicerad kod. Ett annat misstag är att ändra den visuella ordningen med order eller placering i Grid utan att tänka på tangentbordsanvändare. Skärmläsare och tabbordning följer källkoden, inte den visuella ordningen, så den logiska ordningen i HTML bör vara densamma som den användaren ser.

Testa också layouten med längre texter än du räknar med. Ett produktnamn på fyra rader eller en översättning till ett språk med långa ord avslöjar snabbt om kolumnerna har en rimlig minsta bredd.

Sammanfattning

Välj Flexbox när du ordnar saker längs en axel och vill att innehållet ska bestämma storleken. Välj Grid när du behöver kontroll över både rader och kolumner eller vill att flera komponenter ska linjera med varandra. Och tveka inte att använda båda i samma projekt, eftersom de är skapade för att komplettera varandra.