CSS Grid för layout
Definiera rader och kolumner med CSS Grid, placera objekt exakt och skapa vanliga sidlayouter med minimal kod.
CSS Grid för layout ä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.
Vad är CSS Grid?
CSS Grid är ett tvådimensionellt layoutsystem — du styr både rader och kolumner. Det är det bästa verktyget för sidans övergripande struktur och explicit placering av element i ett definierat grid.
Definiera kolumner: grid-template-columns
grid-template-columns definierar kolumnstrukturen. Använd fasta storlekar (px), flexibla bråkdelar (fr) eller auto. repeat(n, size) upprepar en spårdefinition.
.layout {
display: grid;
grid-template-columns: 240px 1fr; /* sidebar + main */
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
}Enheten fr
fr (bråkenhet) fördelar återstående utrymme proportionellt. 1fr 2fr ger den andra kolumnen dubbelt så mycket utrymme som den första. Viktigt för flexibla gridspår.
.layout {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* left center right */
}Definiera rader: grid-template-rows
Du kan även definiera rader explicit. Om du inte gör det skapar webbläsaren automatiskt implicita rader. grid-auto-rows: minmax(200px, auto) anger storleken på implicita rader.
.page {
display: grid;
grid-template-rows: auto 1fr auto; /* header content footer */
min-height: 100vh;
}gap i Grid
Precis som i Flexbox lägger gap till utrymme mellan gridspår utan att påverka ytterkanterna. row-gap och column-gap styr axlarna separat.
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}grid-template-areas
Namnge gridområden med strängar och tilldela element till dem med grid-area. Det skapar läsbar, visuell layoutkod.
.page {
display: grid;
grid-template-areas:
'header header header'
'sidebar main main'
'footer footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr auto;
}
header { grid-area: header; }
sidenav { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Placera objekt med grid-column och grid-row
Styr exakt var ett objekt placeras med grid-column: start / end och grid-row: start / end. Använd -1 för att referera till den sista linjen. span N omfattar N spår.
.featured {
grid-column: 1 / -1; /* span all columns */
grid-row: span 2; /* occupy two rows */
}auto-fit och minmax() — responsiva kolumner
Den kraftfullaste responsiva griddefinitionen på en rad: repeat(auto-fit, minmax(280px, 1fr)). Skapar så många kolumner som får plats, var och en minst 280px bred, och fyller återstående utrymme med 1fr.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}auto-fill kontra auto-fit
auto-fill skapar spår även om de är tomma, vilket behåller ett fast grid. auto-fit komprimerar tomma spår så att objekten expanderar och fyller raden. Använd auto-fit för innehåll som ska sträckas ut.
Implicita kontra explicita gridspår
Spår som du definierar utgör det explicita gridet. När du lägger till fler objekt än det finns definierade spår skapar webbläsaren implicita spår. Styr deras storlek med grid-auto-rows och grid-auto-columns.
Grid eller Flexbox — när ska man använda vilket?
Grid: tvådimensionella layouter, sidstruktur, gallerier, instrumentpaneler. Flexbox: endimensionella rader eller staplar, centrering, fördelning av objekt i en rad. De kompletterar varandra — använd Grid för sidans grundstruktur och Flexbox för komponenternas interna layout.
Snabb kontroll
Vilket CSS-värde skapar kolumner som är minst 250px breda och delar lika på det återstående utrymmet?
Sammanfattning: CSS Grid
grid-template-columns definierar kolumner. fr delar på utrymmet. repeat() förenklar upprepning. gap lägger till mellanrum. grid-template-areas gör layouter läsbara. auto-fit + minmax skapar responsiva grid utan media queries. Grid är förstahandsvalet för tvådimensionella sidlayouter.
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 ”CSS Grid för layout” gratis?
Ja – hela texten till ”CSS Grid för layout” 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 ”CSS Grid för layout”?
Definiera rader och kolumner med CSS Grid, placera objekt exakt och skapa vanliga sidlayouter med minimal kod. 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 ”CSS Grid för layout”?
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.