Auto-fit og auto-fill med minmax
Opret automatisk responsive kolonneantal med auto-fit og auto-fill sammen med minmax().
Auto-fit og auto-fill med minmax er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.
Det automatisk responsive gitter
Det mest kraftfulde CSS Grid-mønster: et fuldt responsivt gitter, der automatisk tilpasser antallet af kolonner uden medieforespørgsler ved hjælp af auto-fit eller auto-fill kombineret med minmax().
auto-fill
auto-fill udfylder rækken med så mange kolonner, som der er plads til ved den angivne minimumsstørrelse. Tomme kolonner bevares som tomme spor i slutningen.
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fit
auto-fit fungerer som auto-fill, men tomme spor sammentrækkes til nulbredde. Eksisterende elementer strækkes, så de udfylder den resterende plads.
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>Forskellen mellem auto-fill og auto-fit
Forskellen har kun betydning, når der er færre elementer, end der kan udfylde rækken:
auto-fill: tomme kolonnespor bevares, og elementerne strækkes ikke for at udfylde demauto-fit: tomme spor sammentrækkes, og elementerne udvides, så de udfylder hele den tilgængelige bredde
auto-fit med minmax()
Det velkendte responsive gittermønster — elementerne er mindst 250px brede, vokser for at udfylde pladsen og ombrydes automatisk til nye rækker:
<div class="responsive-grid">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>minmax() forklaret
minmax(min, max) definerer et interval for sporets størrelse. Sporet bliver ikke mindre end min eller større end max. Kombineret med fr skaber det fleksible spor med en fastlagt minimumsstørrelse.
<div class="track"><div>Flexible track</div></div>auto-fill med minmax til elementer med fast størrelse
Når du vil have elementer med en fast størrelse og tillade tom plads i slutningen:
<div class="icon-grid">
<div>🔧</div><div>⚙</div><div>🔨</div>
</div>Responsivt uden medieforespørgsler
Det er den vigtigste fordel: repeat(auto-fit, minmax(280px, 1fr)) tilpasser sig automatisk fra én kolonne på mobilen til så mange kolonner, som der er plads til på større skærme:
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>min() til en sikrere minmax
Undgå layoutproblemer i meget små beholdere ved at bruge min(100%, 280px) som minimum i stedet for en direkte pixelværdi:
<div class="grid"><div>Item</div></div>auto-fill til mosaiklignende justering
Med auto-fill bevarer tomme spor i slutningen justeringen, når antallet af elementer ikke er et multiplum af antallet af kolonner — det er nyttigt til ensartede gitre.
Gitterets intrinsiske dimensionering sammenlignet med Flexbox
Flexbox med flex-wrap + flex: 1 1 250px ligner dette, men garanterer ikke kolonner med samme bredde — elementerne kan strækkes ujævnt. Grid med minmax sikrer helt ensartede spor.
Hurtigt tjek
Hvilken gitterværdi opretter responsive kolonner uden medieforespørgsler ved at sammentrække tomme spor, så elementerne udfylder den tilgængelige plads?
Opsummering
repeat(auto-fit, minmax(250px, 1fr)) er det mest kraftfulde responsive gittermønster — der er ikke brug for medieforespørgsler. auto-fit sammentrækker tomme spor, så elementerne udfylder rækken. auto-fill bevarer tomme spor for at sikre ensartet justering. Kombinér altid med gap for at få ensartede mellemrum.
Lær CSS med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Auto-fit og auto-fill med minmax” gratis?
Ja — hele teksten til “Auto-fit og auto-fill med minmax” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Auto-fit og auto-fill med minmax”?
Opret automatisk responsive kolonneantal med auto-fit og auto-fill sammen med minmax(). Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på CSS Academy?
Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Auto-fit og auto-fill med minmax”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne CSS Academy-lektion?
Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Navngivne linjer og navngivne grid-områder
- Auto-fit og auto-fill med minmax
- Implicit grid og grid-auto-flow
- Subgrid til justeret indlejret indhold