Auto-fit e auto-fill con minmax
Crei automaticamente il numero di colonne responsive usando auto-fit e auto-fill con minmax().
Auto-fit e auto-fill con minmax è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
La griglia auto-responsive
Lo schema CSS Grid più potente: una griglia completamente responsive che adatta automaticamente il numero di colonne senza alcuna media query, utilizzando auto-fit o auto-fill insieme a minmax().
auto-fill
auto-fill riempie la riga con il maggior numero possibile di colonne, rispettando la dimensione minima indicata. Le colonne vuote vengono mantenute come tracce vuote alla fine.
<div class="grid">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>auto-fit
auto-fit funziona come auto-fill, ma comprime le tracce vuote fino a una larghezza pari a zero. Gli elementi esistenti si espandono per riempire lo spazio rimanente.
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>Differenza tra auto-fill e auto-fit
La differenza conta solo quando gli elementi sono meno di quelli necessari per riempire la riga:
auto-fill: le tracce delle colonne vuote rimangono e gli elementi non si espandono per riempire lo spazioauto-fit: le tracce vuote vengono compresse e gli elementi si espandono fino a riempire tutta la larghezza disponibile
auto-fit con minmax()
Il celebre schema per una griglia responsive: gli elementi sono larghi almeno 250px, crescono per riempire lo spazio e vanno automaticamente a capo su nuove righe:
<div class="responsive-grid">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>Spiegazione di minmax()
minmax(min, max) definisce un intervallo di dimensioni per una traccia. La traccia non sarà più piccola di min né più grande di max. Insieme a fr, crea tracce flessibili con una dimensione minima.
<div class="track"><div>Flexible track</div></div>auto-fill con minmax per elementi di dimensione fissa
Quando desidera elementi di dimensione fissa e vuole lasciare spazio vuoto alla fine:
<div class="icon-grid">
<div>🔧</div><div>⚙</div><div>🔨</div>
</div>Responsive senza media query
Questo è il vantaggio principale: repeat(auto-fit, minmax(280px, 1fr)) si adatta automaticamente passando da una colonna sui dispositivi mobili al maggior numero possibile di colonne sugli schermi più grandi:
<div class="cards">
<div>Card A</div><div>Card B</div>
</div>min() per un minmax più sicuro
Eviti i problemi di layout nei contenitori molto piccoli utilizzando min(100%, 280px) come dimensione minima invece di un semplice valore in pixel:
<div class="grid"><div>Item</div></div>auto-fill per un allineamento simile a masonry
Con auto-fill, le tracce vuote alla fine mantengono l'allineamento quando il numero di elementi non è un multiplo del numero di colonne, risultando utili per creare griglie uniformi.
Dimensionamento intrinseco di Grid e Flexbox
Flexbox con flex-wrap + flex: 1 1 250px è simile, ma non garantisce colonne della stessa larghezza: gli elementi possono espandersi in modo non uniforme. Grid con minmax garantisce tracce perfettamente uniformi.
Verifica rapida
Quale valore della griglia crea colonne responsive senza media query comprimendo le tracce vuote, così che gli elementi riempiano lo spazio disponibile?
Riepilogo
repeat(auto-fit, minmax(250px, 1fr)) è lo schema singolo più potente per una griglia responsive: non sono necessarie media query. auto-fit comprime le tracce vuote, così gli elementi riempiono la riga. auto-fill mantiene le tracce vuote per un allineamento uniforme. Lo abbini sempre a gap per creare le spaziature.
Domande Frequenti
La lezione «Auto-fit e auto-fill con minmax» è gratuita?
Sì — il testo completo di «Auto-fit e auto-fill con minmax» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Auto-fit e auto-fill con minmax»?
Crei automaticamente il numero di colonne responsive usando auto-fit e auto-fill con minmax(). Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Auto-fit e auto-fill con minmax»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Linee e aree della griglia denominate
- Auto-fit e auto-fill con minmax
- Griglia implicita e grid-auto-flow
- Subgrid per contenuti annidati allineati