CSS Academy · leksjon

Implisitt grid og grid-auto-flow

Forstå hvordan CSS Grid håndterer elementer utenfor eksplisitte spor, med implisitte rader og kolonner.

Leksjon 3 av 413 trinn

Implisitt grid og grid-auto-flow er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 3 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 CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Ekspisitt kontra implisitt grid

Det eksplisitte gridet defineres av grid-template-columns og grid-template-rows. Når elementer går utenfor de definerte sporene, oppretter nettleseren implisitte spor automatisk.

grid-auto-rows

Definerer størrelsen på implisitt opprettede radspor. Uten denne egenskapen dimensjoneres implisitte rader slik at innholdet får plass (auto).

  <div class="gallery">
    <div>1</div><div>2</div><div>3</div><div>4</div>
  </div>

grid-auto-rows med minmax

Gjør implisitte rader minst en bestemt høyde, samtidig som de kan utvide seg:

  <div class="feed">
    <div>1</div><div>2</div><div>3</div>
  </div>

grid-auto-columns

Definerer størrelsen på implisitte kolonnespor når elementer plasseres utenfor det eksplisitte kolonneområdet:

  <div class="timeline">
    <div>Event 1</div><div>Event 2</div>
  </div>

grid-auto-flow

Styrer hvordan algoritmen for automatisk plassering plasserer elementer:

row (standard) – plasser i rader og legg til nye rader etter behov
column – plasser i kolonner og legg til nye kolonner
row dense – fyll hull aktivt ved å gå tilbake i plasseringen
column dense – tett utfylling i kolonneretningen

grid-auto-flow: dense

dense gjør at algoritmen forsøker å fylle hull som store elementer med flere spor etterlater. Dette kan føre til at elementer vises i en annen rekkefølge.

  <div class="masonry">
    <div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
  </div>

Mønster med automatisk flyt i kolonner

En vannrett kortstripe med rulling, der kolonnene utvides etter behov:

  <div class="strip">
    <div>Card 1</div><div>Card 2</div><div>Card 3</div>
  </div>

Tett pakking for galleri

Et bildegalleri med blandede størrelser som fyller hull:

  <div class="gallery">
    <div class="wide">Wide</div>
    <div class="tall">Tall</div>
    <div>3</div><div>4</div>
  </div>

Implisitt grid og navngitte områder

Navngitte områder gjelder bare for det eksplisitte gridet. Elementer som plasseres i det implisitte gridet, kan ikke bruke plassering med navngitte områder direkte – de må plasseres ved hjelp av linjenumre eller span.

Visualisere det implisitte gridet

I Chrome DevTools viser layout-overlegget både eksplisitte (hele) og implisitte (stiplede) gridlinjer. Dette hjelper Dem med å forstå hvor automatisk plasserte elementer havner.

Kontrollere implisitt størrelse per element

Elementer som spenner over flere rader i det implisitte gridet, trenger grid-auto-rows for å få riktig størrelse. Uten denne egenskapen dimensjoneres implisitte rader etter innholdet, noe som kan gi ujevne oppsett.

Hurtigsjekk

Hva gjør grid-auto-flow: row dense?

Besvar den i den interaktive leksjonen

Oppsummering

Det implisitte gridet utvider det eksplisitte gridet med automatisk opprettede spor. grid-auto-rows/columns styrer størrelsen på dem, og minmax() gjør dem fleksible. grid-auto-flow angir retningen for plasseringen. Tett pakking med dense fyller hull aktivt – nyttig for masonry-lignende oppsett, men det kan bryte den visuelle rekkefølgen.

Gratis å komme i gang

Lær deg CSS 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: 40
Leksjoner: 159

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Implisitt grid og grid-auto-flow» gratis?

Ja – hele teksten i «Implisitt grid og grid-auto-flow» 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 CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Implisitt grid og grid-auto-flow»?

Forstå hvordan CSS Grid håndterer elementer utenfor eksplisitte spor, med implisitte rader og kolonner. Du øver på CSS 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 CSS Academy?

Ingen tidligere erfaring er nødvendig. CSS 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 3 av 4.

Hvor lang tid tar leksjonen «Implisitt grid og grid-auto-flow»?

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 CSS Academy-leksjonen?

Ja. Alle CSS 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

Navngitte linjer og navngitte grid-områder
Auto-fit og auto-fill med minmax
Implisitt grid og grid-auto-flow
Subgrid for justert nestet innhold

← Tilbake til CSS Academy