Griglia implicita e grid-auto-flow
Comprenda come CSS Grid gestisce gli elementi oltre le tracce esplicite con righe e colonne implicite.
Griglia implicita e grid-auto-flow è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 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.
Griglia esplicita e implicita
La griglia esplicita è definita da grid-template-columns e grid-template-rows. Quando gli elementi oltrepassano le tracce definite, il browser crea automaticamente tracce implicite.
grid-auto-rows
Definisce la dimensione delle tracce di riga create implicitamente. In sua assenza, le righe implicite vengono dimensionate per adattarsi al contenuto (auto).
<div class="gallery">
<div>1</div><div>2</div><div>3</div><div>4</div>
</div>grid-auto-rows con minmax
Imposti per le righe implicite un'altezza minima che possa comunque aumentare:
<div class="feed">
<div>1</div><div>2</div><div>3</div>
</div>grid-auto-columns
Definisce le dimensioni delle tracce di colonna implicite quando gli elementi vengono posizionati al di fuori dell'intervallo esplicito delle colonne:
<div class="timeline">
<div>Event 1</div><div>Event 2</div>
</div>grid-auto-flow
Controlla il modo in cui l'algoritmo di posizionamento automatico colloca gli elementi:
row(predefinito): posiziona gli elementi nelle righe, aggiungendo nuove righe quando necessariocolumn: posiziona gli elementi nelle colonne, aggiungendo nuove colonnerow dense: riempie aggressivamente gli spazi vuoti tornando indietrocolumn dense: riempie densamente gli spazi nella direzione delle colonne
grid-auto-flow: dense
dense fa sì che l'algoritmo tenti di riempire i vuoti lasciati dagli elementi estesi su più tracce. Questo può far apparire gli elementi in un ordine diverso da quello originale.
<div class="masonry">
<div class="featured">Featured</div><div>2</div><div>3</div><div>4</div>
</div>Schema auto-flow per colonne
Striscia di schede con scorrimento orizzontale, in cui le colonne crescono quando necessario:
<div class="strip">
<div>Card 1</div><div>Card 2</div><div>Card 3</div>
</div>Impacchettamento denso per una galleria
Una galleria fotografica con elementi di dimensioni diverse che riempie gli spazi vuoti:
<div class="gallery">
<div class="wide">Wide</div>
<div class="tall">Tall</div>
<div>3</div><div>4</div>
</div>Griglia implicita e aree denominate
Le aree denominate si applicano solo alla griglia esplicita. Gli elementi posizionati nella griglia implicita non possono utilizzare direttamente il posizionamento tramite aree denominate: richiedono il posizionamento tramite numeri di linea o span.
Visualizzare la griglia implicita
In DevTools di Chrome, la sovrapposizione del layout mostra sia le linee della griglia esplicita (continue) sia quelle della griglia implicita (tratteggiate). Questo aiuta a capire dove vengono posizionati automaticamente gli elementi.
Controllare la dimensione implicita per elemento
Gli elementi che si estendono su più righe nella griglia implicita richiedono grid-auto-rows per essere dimensionati correttamente. In sua assenza, le righe implicite vengono dimensionate in base al contenuto, creando layout non uniformi.
Verifica rapida
Che cosa fa grid-auto-flow: row dense?
Riepilogo
La griglia implicita estende quella esplicita con tracce create automaticamente. grid-auto-rows/columns ne controlla la dimensione; minmax() le rende flessibili. grid-auto-flow indica la direzione del posizionamento. L'impacchettamento dense riempie aggressivamente gli spazi vuoti: è utile per i layout in stile masonry, ma può compromettere l'ordine visivo.
Domande Frequenti
La lezione «Griglia implicita e grid-auto-flow» è gratuita?
Sì — il testo completo di «Griglia implicita e grid-auto-flow» è 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 «Griglia implicita e grid-auto-flow»?
Comprenda come CSS Grid gestisce gli elementi oltre le tracce esplicite con righe e colonne implicite. 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 3 di 4.
Quanto tempo richiede la lezione «Griglia implicita e grid-auto-flow»?
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