PricingLoginStart free
CSS Academy · Lektion

repeat() och minmax() i Grid

Generera flera gridspår och definiera flexibla storleksintervall med repeat() och minmax().

Lektion 3 av 413 steg

repeat() och minmax() i Grid är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 3 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.

repeat() i Grid-sammanhang

repeat(count, track-size) är en CSS Grid-funktion som genererar flera spårdefinitioner utan upprepning. Den fungerar inuti grid-template-columns och grid-template-rows.

repeat() med fast antal

Skapa fyra lika breda kolumner:

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

repeat() med mönster

Upprepa ett mönster av spår:

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

minmax() i spår

minmax(min, max) definierar ett intervall för spårets storlek:

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

auto-fit med minmax()

Receptet för ett responsivt Grid:

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

minmax(min-content, max-content)

Spårstorlekar kan använda nyckelord för intrinsisk storleksanpassning:

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

minmax() i rader

Använd minmax() för rader för att låta innehållet styra höjden, med ett minimi​​värde:

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

fit-content() för kolumner

fit-content(max) gör ett spår lika brett som innehållet, upp till ett angivet maximum – som max-content, men med ett tak:

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

Kombinera repeat() och namngivna linjer

Upprepa namngivna linjer för att adressera enskilda kolumner med namn:

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

auto-fill med minmax för fasta objekt

När objekt inte ska sträckas ut utöver sin naturliga storlek:

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

fr jämfört med procent i Grid

Till skillnad från procentenheter tar fr-enheter automatiskt hänsyn till utrymmet i gap. repeat(3, 1fr) med gap: 24px ger tre verkligen lika breda kolumner. Med procent skulle Ni behöva använda calc() för att subtrahera gap.

Snabbtest

Vad definierar repeat(3, minmax(100px, 1fr))?

Besvara frågan i den interaktiva lektionen

Sammanfattning

repeat(count, track) genererar flera spår utan upprepning. minmax(min, max) definierar flexibla intervall för spårstorlek. Mönstret repeat(auto-fit, minmax(280px, 1fr)) är det kraftfullaste responsiva Grid-mönstret – inga media queries och automatiskt responsiva kolumner. Använd fit-content(max) för innehållsanpassade sidokolumner.

Gratis att börja

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
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”repeat() och minmax() i Grid” gratis?

Ja – hela texten till ”repeat() och minmax() i Grid” 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 ”repeat() och minmax() i Grid”?

Generera flera gridspår och definiera flexibla storleksintervall med repeat() och minmax(). 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 3 av 4.

Hur lång tid tar lektionen ”repeat() och minmax() i Grid”?

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

  1. calc() för dynamiska beräkningar
  2. min(), max() och clamp() för flexibla värden
  3. repeat() och minmax() i Grid
  4. color-mix() och relativ färgsyntax
← Tillbaka till CSS Academy