CSS Academy · leksjon

repeat() og minmax() i Grid

Generer flere grid-spor og definer fleksible størrelsesintervaller med repeat() og minmax().

Leksjon 3 av 413 trinn

repeat() og minmax() i Grid 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.

repeat() i Grid-kontekst

repeat(count, track-size) er en CSS Grid-funksjon som genererer flere spordefinisjoner uten gjentakelse. Den fungerer inni grid-template-columns og grid-template-rows.

repeat() med fast antall

Opprett 4 like kolonner:

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

repeat() med mønster

Gjenta et mønster av spor:

  <div class="striped-grid">
    <div>A</div><div>B</div><div>C</div><div>D</div><div>E</div><div>F</div>
  </div>

minmax() inni spor

minmax(min, max) definerer et område for sporstørrelsen:

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

auto-fit med minmax()

Oppskriften på et responsivt Grid-oppsett:

  <div class="cards">
    <div>Card A</div><div>Card B</div>
  </div>

minmax(min-content, max-content)

Sporstørrelser kan bruke nøkkelord for intrinsisk størrelsesbestemmelse:

  <div class="labels">
    <div>Label</div><div>Value</div>
  </div>

minmax() i rader

Bruk minmax() for rader for å la innholdet styre høyden, samtidig som en minimumshøyde angis:

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

fit-content() for kolonner

fit-content(max) gjør et spor like bredt som innholdet, opptil en angitt maksimumsbredde — som max-content, men med en øvre grense:

  <div class="layout"><div>Sidebar</div><div>Main</div></div>

Kombinere repeat() og navngitte linjer

Gjenta navngitte linjer for å adressere individuelle kolonner med navn:

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

auto-fill med minmax for elementer med fast størrelse

Når elementer ikke skal strekkes utover den naturlige størrelsen:

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

fr sammenlignet med prosenter i Grid

I motsetning til prosenter tar fr-enheter automatisk hensyn til gap-plass. repeat(3, 1fr) med gap: 24px gir 3 helt like kolonner. Med prosenter må De bruke calc() for å trekke fra gap-plassen.

Rask kontroll

Hva definerer repeat(3, minmax(100px, 1fr))?

Besvar den i den interaktive leksjonen

Oppsummering

repeat(count, track) genererer flere spor uten gjentakelse. minmax(min, max) definerer fleksible områder for sporstørrelser. Mønsteret repeat(auto-fit, minmax(280px, 1fr)) er det kraftigste responsive Grid-mønsteret — ingen mediespørringer og automatisk responsive kolonner. Bruk fit-content(max) for sidekolonner som tilpasses innholdet.

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 «repeat() og minmax() i Grid» gratis?

Ja – hele teksten i «repeat() og minmax() i Grid» 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 «repeat() og minmax() i Grid»?

Generer flere grid-spor og definer fleksible størrelsesintervaller med repeat() og minmax(). 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 «repeat() og minmax() i Grid»?

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

calc() for dynamiske beregninger
min(), max() og clamp() for flytende verdier
repeat() og minmax() i Grid
color-mix() og relativ fargesyntaks

← Tilbake til CSS Academy