Kombinera Flexbox och Grid
Använd Grid för sidans övergripande layout och Flexbox för justering på komponentnivå, och lär dig när varje verktyg passar bäst.
Kombinera Flexbox och Grid är en gratis lektion i Frontend Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Frontend Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Frontend Academy innehåller totalt 4 lektioner.
De kompletterar varandra
Flexbox och Grid är inte rivaler – de är utformade för att fungera tillsammans. Det typiska mönstret är att använda CSS Grid för sidans övergripande struktur och sedan Flexbox inuti varje gridområde för att ordna komponentens innehåll.
Sidlayout med Grid, komponenter med Flex
Definiera sidans övergripande struktur med Grid. Inuti varje gridområde använder du Flexbox för att ordna komponenten: navigeringslänkar i en rad och kortinnehåll i en kolumn.
/* Page skeleton */
body {
display: grid;
grid-template-areas: 'header' 'main' 'footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Component inside grid area */
header {
display: flex;
justify-content: space-between;
align-items: center;
}Mönster för kortrutnät
Det klassiska mönstret är Grid för kortlayouten och Flex för varje korts interna layout. Det gör att korten justeras mot rutnätet medan innehållet i dem (bild, rubrik, brödtext och sidfot) staplas korrekt.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
}
.card-body { flex: 1; } /* push footer down */Mönster för navigeringsfält
Ett vanligt navigeringsfält kombinerar båda. Själva navigeringen är en flexbehållare för logotypen och länkarna. Länksektionen kan vara en annan flexbehållare. En megameny kan använda Grid för en layout med flera kolumner.
Holy Grail-layout
Holy Grail-layouten (sidhuvud, mitten med tre kolumner och sidfot) skapas enkelt med Grid i dag. De tre kolumnerna – vänster sidofält, huvudinnehåll och höger sidofält – är Grid-kolumner; innehållet i varje kolumn använder Flexbox.
.page {
display: grid;
grid-template:
'header header header' auto
'left main right' 1fr
'footer footer footer' auto
/ 200px 1fr 200px;
min-height: 100vh;
}Centrera allt – Grid eller Flex
Både Grid och Flexbox kan centrera innehåll perfekt. Grid: place-items: center (kortnotation för align-items + justify-items). Flex: justify-content: center; align-items: center.
.center-grid {
display: grid;
place-items: center; /* centers both axes */
min-height: 100vh;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Responsiv layout med sidofält
Mobil: en kolumn (navigeringen överst). Surfplatta+: sidofält och innehåll sida vid sida. Grid gör detta deklarativt – ändra template-areas i en media query.
Mönster för ikon + text
Ett mycket vanligt mikrolayoutmönster är en ikon bredvid text. Flexbox passar perfekt eftersom det handlar om en enda rad med justering.
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
}
.alert-icon { flex-shrink: 0; width: 20px; }
.alert-body { flex: 1; }När du ska välja det ena
Välj Grid när du tänker i både rader OCH kolumner, när du behöver justera objekt mot varandra över spår och när du bygger en sidstruktur. Välj Flex när du tänker i en riktning, när objekten ska kunna krympa och växa och när du ordnar en rad med knappar eller en stapel med objekt.
Överkomplicera inte
Ibland är ett enkelt blockelement med max-width och margin: auto bättre än ett komplext rutnät. Alla layouter behöver inte Grid. Använd det enklaste verktyget som löser uppgiften.
Felsöka layoutproblem
I DevTools kan du klicka på rutnäts- eller flexmärkena i panelen Elements för att visa rutnätslinjer eller konturer runt flexobjekten. Det gör den osynliga layoutstrukturen synlig och är ovärderligt när du ska hitta orsaken till feljusteringar.
Snabbkontroll
Vilken kombination av layoutverktyg är vanligast för sidlayouter respektive komponentlayouter?
Repetition: Kombinera Grid och Flex
Grid och Flexbox kompletterar varandra. Använd Grid för en tvådimensionell sidstruktur. Använd Flexbox för komponenternas endimensionella innehåll. place-items: center på ett rutnät centrerar allt. flex-direction: column + flex: 1 på ett korts brödtextdel skjuter sidfötterna längst ned. Felsök med överläggsmärkena i DevTools.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Kombinera Flexbox och Grid” gratis?
Ja – hela texten till ”Kombinera Flexbox och Grid” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Frontend Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Frontend Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Kombinera Flexbox och Grid”?
Använd Grid för sidans övergripande layout och Flexbox för justering på komponentnivå, och lär dig när varje verktyg passar bäst. Ni övar på Frontend Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Frontend Academy?
Du behöver inga förkunskaper. Utbildningen i Frontend Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Kombinera Flexbox och Grid”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Frontend Academy-lektionen?
Ja. Varje Frontend Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Fördjupning i Flexbox: justering, radbrytning och ordning
- CSS Grid: template-areas auto-fit minmax
- Kombinera Flexbox och Grid
- CSS-variabler för temaanpassning