Display, grid och mallkolumner och -rader
Aktivera CSS Grid och definiera kolumn- och radspår med grid-template-columns och grid-template-rows.
Display, grid och mallkolumner och -rader är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 1 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 CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.
Aktivera CSS Grid
CSS Grid aktiveras med display: grid på en container. Dess direkta barn blir automatiskt gridobjekt som placeras i celler.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Item A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Item B</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Item C</div>
</div>grid-template-columns
grid-template-columns definierar antalet kolumner och deras storlek. Varje värde skapar ett kolumnspår.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>grid-template-rows
grid-template-rows definierar explicita radspår. Objekt som hamnar utanför de definierade raderna skapar implicita rader.
<div class="layout" style="min-height:220px;">
<div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
<div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>Kolumn- och radspår
Varje värde i grid-template-columns eller grid-template-rows skapar ett spår. Spår kan använda valfri storleksenhet:
- Fast:
200px,10rem - Flexibel:
1fr - Innehållsbaserad:
auto,min-content,max-content
fr-enheten
fr (fraktionsenheten) fördelar det tillgängliga utrymmet efter att fasta storlekar har dragits av. 1fr 2fr skapar kolumner i förhållandet 1:2.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>auto i spår
auto i ett spår anpassar storleken efter innehållet. Som kolumn tar det den minsta storlek som krävs av den bredaste cellen; som rad anpassas det efter den högsta cellen.
<div class="sidebar-layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>Exempel på sidlayout
En vanlig sidlayout med tre rader för sidhuvud, huvudinnehåll och sidfot:
<div class="page">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
<footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>Kortformen grid-template
grid-template kombinerar rader och kolumner:
<div class="grid" style="display:grid;min-height:180px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>Inspektera Grid i DevTools
DevTools i Chrome och Firefox kan lägga över linjerna för grid-spåren på sidan. Klicka på gridmarkeringen i panelen Elements för att visualisera kolumner, rader, mellanrum och namngivna områden.
Välja mellan Grid och Flexbox
Använd Grid när du behöver styra både rader och kolumner samtidigt. Använd Flexbox för endimensionella layouter, alltså en rad med objekt eller en kolumn med objekt. Många layouter använder båda.
Linjenummer
Grid numrerar automatiskt sina linjer med början på 1. Du kan använda dessa nummer för att placera objekt manuellt. Kolumnlinjerna går från 1 till n+1, där n är antalet kolumner.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="header" style="grid-column:1 / -1;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header — spans all columns (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item 2</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item 3</div>
</div>Snabb kontroll
Vad skapar grid-template-columns: 200px 1fr 2fr?
Sammanfattning
display: grid skapar en grid-behållare. grid-template-columns och grid-template-rows definierar spår. Enheten fr fördelar det återstående utrymmet proportionellt. auto anpassar storleken efter innehållet. Grid passar utmärkt när du behöver styra en layout i två dimensioner.
Lär dig CSS 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
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Display, grid och mallkolumner och -rader” gratis?
Ja – hela texten till ”Display, grid och mallkolumner och -rader” 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 CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Display, grid och mallkolumner och -rader”?
Aktivera CSS Grid och definiera kolumn- och radspår med grid-template-columns och grid-template-rows. Ni övar på CSS 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 CSS Academy?
Du behöver inga förkunskaper. Utbildningen i CSS 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 1 av 4.
Hur lång tid tar lektionen ”Display, grid och mallkolumner och -rader”?
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 CSS Academy-lektionen?
Ja. Varje CSS 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
- Display, grid och mallkolumner och -rader
- Fr-enheten och repeat
- Gap och gridplacering
- Gridmallområden