CSS Grid: template-areas, auto-fit og minmax
Navngi grid-områder for oversiktlige layouter, bruk auto-fit med minmax() for responsive kolonner, og styr implisitte spor.
CSS Grid: template-areas, auto-fit og minmax er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Navngitte malområder – visuell layout
grid-template-areas lar Dem navngi områder i et visuelt ASCII-format. Hver streng er en rad, og hvert ord er en celle. Punktum (.) representerer tomme celler. Tildel elementer med grid-area: name.
.layout {
display: grid;
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 240px 1fr;
grid-template-rows: 60px 1fr 48px;
min-height: 100vh;
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: main; }
footer { grid-area: footer; }Responsive malområder med mediespørringer
Endre oppsettet for template-areas ved bruddpunkter for å flytte sidepanelet fra en kolonne til under hovedinnholdet på mobil.
.layout {
grid-template-areas:
'header'
'main'
'sidebar'
'footer';
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.layout {
grid-template-areas:
'header header'
'sidebar main'
'footer footer';
grid-template-columns: 220px 1fr;
}
}auto-fit kontra auto-fill
auto-fit: skjuler tomme spor slik at elementene strekkes for å fylle raden. auto-fill: beholder rutenettstrukturen selv om sporene er tomme. For responsive kortrutenett er auto-fit nesten alltid det riktige valget.
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}minmax() i dybden
minmax(min, max) definerer et spor som er minst min og høyst max. Vanlige kombinasjoner: minmax(0, 1fr) (fullstendig fleksibelt), minmax(200px, 1fr) (responsivt med minimumsstørrelse), minmax(auto, auto) (størrelse tilpasset innholdet).
Elementer over flere kolonner og rader
Bruk grid-column: span 2 for å la et element strekke seg over to kolonner. Kombiner med grid-row: span 2 for et fremhevet element som opptar en blokk på 2×2 i rutenettet.
.featured {
grid-column: span 2;
grid-row: span 2;
}
/* Or explicit placement: */
.featured {
grid-column: 1 / 3; /* from line 1 to line 3 */
grid-row: 1 / 3;
}Tett automatisk plassering
grid-auto-flow: dense fyller automatisk inn tomme mellomrom med mindre elementer. Dette er nyttig for oppsett som ligner murverk, der elementene har ulik størrelse.
.mosaic {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-flow: dense;
gap: 8px;
}Fraksjonelle enheter og prosentverdier
fr-enheten viser alltid til den tilgjengelige plassen etter at spor med fast størrelse og mellomrom er trukket fra. Ved å kombinere fr med faste størrelser får De maksimal fleksibilitet: et fast sidepanel og et fleksibelt hovedinnhold.
grid-auto-columns og grid-auto-rows
Disse egenskapene styrer størrelsen på implisitt opprettede spor (når elementer plasseres utenfor det eksplisitte rutenettet). grid-auto-rows: minmax(100px, auto) gir implisitte rader en minimumshøyde.
.photo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(200px, auto);
gap: 8px;
}Undersøke Grid i DevTools
Chrome DevTools legger rutenettlinjer og områdenavn over siden når De klikker på «grid»-merket ved siden av en rutenettcontainer i Elements-panelet. Bruk dette til å feilsøke uventede sporstørrelser og elementplassering.
CSS Subgrid
grid-template-columns: subgrid lar et nøstet rutenett justeres etter sporene i det overordnede rutenettet. Det støttes i alle moderne nettlesere siden 2023 og er avgjørende for å justere innholdet i kort på tvers av et kortrutenett.
.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid; /* aligns to parent rows */
}Når Grid er bedre enn Flexbox
Grid er det beste valget når De trenger eksplisitt todimensjonal kontroll — når både rader og kolonner er viktige. Hvis De bare vil plassere elementer i en rad eller en stabel, er Flexbox enklere.
Hurtigsjekk
Hvilken CSS Grid-verdi oppretter så mange kolonner som får plass, med en minimumsbredde på 200px, der hver kolonne deler den resterende plassen likt?
Oppsummering: Avansert CSS Grid
grid-template-areas oppretter oversiktlige oppsett med navngitte områder. auto-fit + minmax lager responsive rutenett uten mediespørringer. La elementer strekke seg over flere kolonner og rader. Tett automatisk plassering fyller tomrom. Bruk rutenettoverlegget i DevTools til feilsøking. Subgrid justerer nøstede elementer etter sporene i det overordnede rutenettet.
Lær deg HTML med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 41
- Leksjoner
- 163
Ofte stilte spørsmål
Er leksjonen «CSS Grid: template-areas, auto-fit og minmax» gratis?
Ja – hele teksten i «CSS Grid: template-areas, auto-fit og minmax» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «CSS Grid: template-areas, auto-fit og minmax»?
Navngi grid-områder for oversiktlige layouter, bruk auto-fit med minmax() for responsive kolonner, og styr implisitte spor. Du øver på Frontend Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Frontend Academy?
Ingen tidligere erfaring er nødvendig. Frontend Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «CSS Grid: template-areas, auto-fit og minmax»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Frontend Academy-leksjonen?
Ja. Alle Frontend Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Fordypning i Flexbox: justering, linjebryting og rekkefølge
- CSS Grid: template-areas, auto-fit og minmax
- Kombinere Flexbox og Grid
- CSS-variabler for tematisering