CSS Grid förklarat – så skiljer det sig från Flexbox
CSS Grid och Flexbox är de två moderna layout-systemen i CSS. Båda löser layoutproblem som vi tidigare hackade ihop med floats och clearfix, men de gör det på fundamentalt olika sätt. Att välja rätt verktyg för rätt situation sparar dig kod, tid och frustration.
Här går vi igenom hur CSS Grid fungerar, hur det skiljer sig från Flexbox, och när du bör använda vilket.
Vad är CSS Grid?
CSS Grid är ett tvådimensionellt layout-system. Det betyder att du kan placera element i rader och kolumner samtidigt — du har kontroll över hela rutnätet, inte bara en axel åt gången.
En grundläggande grid-layout ser ut så här:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 1.5rem;
}
Det skapar tre lika breda kolumner med 1fr vardera (fractional unit — varje kolumn tar en lika stor del av tillgängligt utrymme). gap ersätter den gamla metoden att sätta marginal på varje barn-element, och fungerar i både rad- och kolumnled.
Grid med namngivna områden
En av CSS Grids mest kraftfulla funktioner är namngivna gridområden. Istället för att räkna kolumner och rader namnger du layoutens delar:
.page {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
min-height: 100vh;
gap: 0;
}
.page-header { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-content { grid-area: content; }
.page-footer { grid-area: footer; }
Layouten blir direkt visuellt läsbar i CSS:en — du ser bokstavligen hur sidan är strukturerad. Ändrar du layouten för en breakpoint behöver du bara omdefiniera grid-template-areas, inte flytta om element i HTML:en.
Vad är Flexbox?
Flexbox är ett endimensionellt layout-system. Det hanterar layout i en riktning åt gången — antingen horisontellt (row) eller vertikellt (column). Det är perfekt för att fördela utrymme och justera element längs en enda axel.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
}
Flexbox excellerar på att centrera element, fördela utrymme jämnt, och hantera innehåll som kan växa eller krympa. justify-content: space-between med tre nav-element ger dig logotyp till vänster, meny i mitten och CTA-knapp till höger — med en enda deklaration.
Centrera med Flexbox vs Grid
Vertikal centrering var länge CSS mest skämtsamma problem. Både Grid och Flexbox löser det trivialt, men med olika syntax:
/* Flexbox */
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}
/* Grid — den kortaste varianten */
.grid-center {
display: grid;
place-items: center;
}
place-items: center är en Grid-shorthand som centrerar i båda axlarna med en enda rad. Det är förmodligen den elegantaste lösningen på vertikal centrering som CSS någonsin producerat.
CSS Grid vs Flexbox — den avgörande skillnaden
Kärnan i skillnaden: Grid är layout-först, Flexbox är innehåll-först.
Med Grid definierar du ett rutnät och placerar element i det. Du bestämmer strukturen innan innehållet finns. Det är perfekt för övergripande sidlayouter, dashboards och bildgallerier där du vet hur rutnätet ska se ut.
Med Flexbox utgår du från innehållet och låter det fördela sig. Du säger ”gör dessa element lika breda” eller ”centrera det här vertikalt” utan att definiera ett explicit rutnät. Det är perfekt för navigeringsfält, knappgrupper, formulärlayouter och komponentinterna layouts.
Praktiskt jämförelseexempel
Här är samma kortlayout med båda systemen:
/* Med CSS Grid: explicit 3-kolumners rutnät */
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
/* Med Flexbox: låt korten fördela sig */
.card-flex {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.card-flex .card {
flex: 1 1 300px;
}
Grid-versionen ger dig exakt tre kolumner oavsett antal kort. Flexbox-versionen låter korten flöda — tre per rad om det finns plats, två om skärmen är smalare. Inget är ”bättre” — det beror på om du vill ha en strikt grid eller ett flexibelt flöde.
Responsiv layout med CSS Grid
Grid har inbyggda verktyg för responsivitet som minskar behovet av mediaqueries. auto-fill och auto-fit i kombination med minmax() skapar adaptiva layouts:
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
Det här skapar så många kolumner som ryms, där varje kolumn är minst 280px bred. På en bred skärm kanske det blir fyra kolumner, på en telefon en. Ingen mediaquery behövs.
Skillnaden mellan auto-fill och auto-fit syns när det finns färre element än kolumner. auto-fill behåller tomma kolumner (utrymmet reserveras), medan auto-fit kollapsar dem och låter befintliga element expandera. I de flesta fall är auto-fill det säkrare valet.
Flexbox förklarat för responsiva komponenter
Flexbox hanterar responsivitet annorlunda — genom att låta element växa och krympa:
.form-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.form-row .field {
flex: 1 1 200px;
}
.form-row .field--wide {
flex: 2 1 400px;
}
flex: 1 1 200px betyder: väx lika mycket som andra element, krympas vid behov, med 200px som bas-bredd. .field--wide med flex: 2 tar dubbelt så mycket plats som ett vanligt fält. Det ger en proportionell layout som anpassar sig utan att du behöver räkna ut pixelvärden.
Kombinera CSS Grid och Flexbox
I praktiken använder du nästan alltid båda. Grid för sidans övergripande struktur och Flexbox för komponenterna inuti:
/* Grid för sidlayouten */
.dashboard {
display: grid;
grid-template-columns: 240px 1fr;
grid-template-rows: 64px 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
min-height: 100vh;
}
/* Flexbox för navigeringen inuti headern */
.dashboard-header {
grid-area: header;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
}
/* Flexbox för knappgruppen i headern */
.header-actions {
display: flex;
gap: 0.75rem;
align-items: center;
}
Dashboard-layouten med sidebar och header/main-area löses med Grid. Navigeringen och knappgruppen inuti headern löses med Flexbox. Var och en gör det den är bäst på.
Subgrid — dela rutnätet med barn-element
En historisk begränsning med CSS Grid har varit att barn-element skapar sina egna, separata grids. Om du har tre kort i en grid och varje kort har en rubrik, bild och text — finns det inget sätt att säkerställa att rubrikerna i alla kort har exakt samma höjd. Rubrikens höjd i varje kort beror på dess eget innehåll.
subgrid löser det. Det låter ett barn-element ärva förälderns rutnät istället för att skapa sitt eget:
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}
Nu delar alla kort samma radlinjer — rubrikerna hamnar på samma höjd oavsett hur lång texten är. Subgrid stöds i alla moderna webbläsare och är redo att använda i produktion.
Vanliga misstag
Ett vanligt misstag är att använda Grid för allt. Om du bara behöver centrera en knapp eller fördela utrymme mellan tre element horisontellt är Grid onödigt — Flexbox gör det med mindre kod.
Omvänt: om du försöker bygga en tvådimensionell layout med nästlade Flexbox-containers (en yttre flex-row med inre flex-columns) gör du sannolikt ditt liv svårare. Grid hanterar det i en enda container.
Ett annat misstag är att glömma min-width: 0 på flex-children. Flexbox-element har min-width: auto som standard, vilket innebär att de aldrig krymper under sitt innehålls minsta bredd. Långa ord eller bilder kan bryta din layout om du inte lägger till min-width: 0 eller overflow: hidden.
Sammanfattning
CSS Grid och Flexbox kompletterar varandra. Använd Grid när du behöver tvådimensionell kontroll — sidlayouter, dashboards, bildgallerier. Använd Flexbox när du arbetar i en dimension — navigeringsfält, knappgrupper, formulärrader. repeat(auto-fill, minmax()) i Grid och flex-wrap med flex-shorthand i Flexbox ger dig responsivitet utan mediaqueries. Och i riktiga projekt använder du nästan alltid båda: Grid för strukturen, Flexbox för komponenterna inuti.