Guía de CSS Grid

Container

Steg 1: Aktivera Grid display: grid

Precis som Flexbox börjar allt med att aktivera layoutläget. display: grid förvandlar elementet till en grid-container.

Utan vs. med Grid

display: block (standard)

A
B
C

display: grid

A
B
C
/* Aktivera grid */ display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3 lika kolumner */
Template

Steg 2: Kolumner grid-template-columns

Definiera antal kolumner och deras bredd. Du kan blanda px, %, fr och auto fritt.

Klicka för olika kolumnlayouter
1
2
3
4
5
6
grid-template-columns: 1fr 1fr 1fr;
Template

Steg 3: Rader grid-template-rows

Styr radernas höjd explicit. Rader utan definierad höjd anpassar sig automatiskt efter innehåll.

Olika radhöjder
1
2
3
4
5
6
7
8
9
grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto;
Enhet

Steg 4: Fraktioner fr

fr (fraction) fördelar tillgängligt utrymme proportionellt. 1fr + 2fr = första kolumnen får ⅓, andra får ⅔.

Visualisering av fr-fördelning
grid-template-columns: 1fr 1fr 1fr;
💡 fr vs. %: Procent beräknas på containerns totala bredd (inklusive gap). fr fördelar det utrymme som blir kvar efter fasta värden och gap. Det gör fr smartare och enklare att arbeta med.
Container

Steg 5: Mellanrum gap

Samma gap-egenskap som i Flexbox. Kan sättas separat med row-gap och column-gap.

Dra för att ändra gap
row-gap 8px
col-gap 8px
1
2
3
4
5
6
row-gap: 8px; column-gap: 8px; /* Eller kort: gap: 8px 8px; */
Funktion

Steg 6: Upprepa repeat()

Istället för att skriva 1fr 1fr 1fr 1fr kan du skriva repeat(4, 1fr). Fungerar med alla värden.

repeat()-variationer
1
2
3
4
5
6
7
8
9
grid-template-columns: repeat(3, 1fr); /* Samma som: 1fr 1fr 1fr */
Funktion

Steg 7: Min & Max minmax()

Sätt min- och maxstorlek för spår. Kolumnen kan aldrig bli smalare eller bredare än gränserna.

Ändra fönsterstorlek för att se effekten
min:120px
max:1fr
2fr
min:80px
max:1fr
grid-template-columns: minmax(120px, 1fr) 2fr minmax(80px, 1fr); /* Vanligt mönster — rader som aldrig är för små */ grid-template-rows: repeat(3, minmax(60px, auto));
Grid-item

Steg 8: Placering grid-column · grid-row

Placera items exakt genom att ange start- och slutlinjer. Linjer numreras från 1. span anger hur många spår ett item sträcker sig.

Klicka för olika placeringar
/* Placera i kolumn 1–3 (sträcker sig 2 kolumner) */ grid-column: 1 / 3; /* Samma sak: */ grid-column: span 2;
📐 Linjenumrering: Ett 4-kolumns grid har 5 vertikala linjer (1–5). grid-column: 2 / 4 placerar elementet mellan linje 2 och 4, dvs. kolumn 2–3. Negativa tal räknar bakifrån: -1 = sista linjen.
Template

Steg 9: Namngivna Områden grid-template-areas

Det mest visuella sättet att bygga layouter. Namnge områden med strängar som representerar rader.

Klicka för olika layouter
Justering

Steg 10: Justera Items justify-items · align-items

justify-items justerar horisontellt inom cellen. align-items justerar vertikalt. place-items är shorthand för båda.

Kombinera justify + align
justify-items:
align-items:
1
2
3
Bred
5
6
justify-items: center; /* horisontell */ align-items: center; /* vertikal */ /* Shorthand: */ place-items: center center;
Justering

Steg 11: Fördela Hela Gridet justify-content · align-content

Om grid-spåren inte fyller hela containern kan du fördela det överskjutande utrymmet.

justify-content
1
2
3
4
5
6
grid-template-columns: 80px 80px 80px; /* fast, fyller ej hela */ justify-content: start;
Container

Steg 12: Flödesriktning grid-auto-flow

Bestämmer om nya items placeras rad för rad (row) eller kolumn för kolumn (column). dense fyller luckor.

Ändra flödesriktning
1 (span 2)
2
3 (span 2)
4
5
6 (span 3)
grid-auto-flow: row; /* dense fyller luckor i gridet automatiskt */
Responsivt

Steg 13: Responsivt Grid auto-fill · auto-fit

Det magiska receptet: repeat(auto-fill, minmax(...)) skapar responsiva grids utan media queries.

auto-fill vs. auto-fit — ändra fönsterstorlek!
1
2
3
4
5
/* Responsivt utan media queries! */ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* auto-fill: behåller tomma spår */ /* auto-fit: kollapsar tomma spår → items expanderar */
🏆 Bästa responsiva mönstret: repeat(auto-fit, minmax(250px, 1fr)) ger ett grid som automatiskt anpassar antal kolumner efter skärmstorlek. Perfekt för kortlayouter!
Container

Steg 14: Implicita Spår grid-auto-rows / columns

Om items hamnar utanför de explicita spåren skapas automatiska (implicita) spår. Styr deras storlek.

Bara 2 rader definierade — fler skapas automatiskt
1 (explicit)
2
3
4
5
6
7 (implicit)
8
9
grid-template-rows: 80px 80px; /* 2 explicita rader */ grid-auto-rows: 50px; /* extra rader → 50px */ grid-auto-rows: minmax(50px, auto); /* minst 50px, växer vid behov */
Modern CSS

Steg 15: Subgrid subgrid

Ett grid-item kan ärva förälderns spår med subgrid. Det löser problemet med inriktning av nästlat innehåll.

Subgrid — barnen ärver kolumner
Sub 1
Sub 2
Sub 3
Sub 4
A
B
C
D
/* Förälder */ display: grid; grid-template-columns: repeat(4, 1fr); /* Barn som sträcker sig 4 kolumner */ grid-column: span 4; display: grid; grid-template-columns: subgrid; /* ärver förälderns kolumner! */
Praktiskt

Steg 16: Praktiska Layouter

Verkliga layoutmönster byggda med Grid — redo att använda i dina projekt.

Klicka för färdiga layouter
Grid vs. Flexbox? Använd Grid för 2D-layouter (rader + kolumner), sidmallar och komplexa positioneringar. Använd Flexbox för 1D-flöden (en rad eller kolumn), navigeringsmenyer och justering av enskilda element. De kompletterar varandra perfekt!

Reklam