Subgrid per contenuti annidati allineati
Utilizzi subgrid per allineare gli elementi della griglia annidata alle tracce della griglia genitore.
Subgrid per contenuti annidati allineati è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 4 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.
Il problema di subgrid
Una difficoltà comune: si dispone di una griglia di schede, ciascuna con intestazione, corpo e footer. Senza subgrid, gli elementi appartenenti a schede diverse non possono allinearsi sulle stesse linee di base, perché ogni scheda ha un layout indipendente.
Che cos'è Subgrid?
subgrid è un valore per grid-template-columns o grid-template-rows che fa sì che una griglia annidata erediti e partecipi alle definizioni delle tracce della griglia padre.
grid-template-rows: subgrid
Un elemento della griglia che è anche un contenitore della griglia può utilizzare subgrid per allineare i propri elementi figli alle tracce della griglia padre:
<div class="card-grid">
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Body</div>
<div class="card-footer">Footer</div>
</div>
</div>grid-template-columns: subgrid
Analogamente, l'uso di subgrid sulle colonne consente agli elementi annidati di allinearsi alle tracce delle colonne della griglia padre, una soluzione utile per allineare coppie etichetta-valore o campi di moduli distribuiti su più colonne di schede.
Subgrid e align-content a confronto
Senza subgrid, è possibile allineare parzialmente il contenuto usando align-content o altezze fisse, ma questa soluzione è fragile. Subgrid consente un vero allineamento basato sulle altezze effettive del contenuto.
Subgrid per l'allineamento dei moduli
Allineamento di coppie etichetta-input su più colonne di un modulo:
<div class="form-grid">
<div class="form-section">
<label>Name</label><input placeholder="Name" />
<label>Email</label><input placeholder="Email" />
</div>
</div>Subgrid si estende su righe e colonne
Una subgrid può estendersi su più tracce della griglia padre ed ereditarle in entrambe le direzioni:
<div class="layout"><div class="feature">Feature spans grid</div></div>Aree denominate con Subgrid
Quando una subgrid eredita tracce denominate dalla griglia padre, questi nomi sono disponibili per il posizionamento all'interno del contenitore subgrid.
Ereditarietà delle spaziature
Per impostazione predefinita, le subgrid ereditano i valori di gap della griglia padre. La griglia annidata partecipa allo stesso sistema di spaziatura.
Nota sul supporto dei browser
Subgrid è disponibile in Firefox dal 2019. Chrome ha aggiunto il supporto nel 2023. Oggi tutti i browser moderni lo supportano. Verifichi il supporto per il pubblico di riferimento prima di utilizzarlo in produzione.
Miglioramento progressivo con Subgrid
Fornisca un'alternativa per i browser meno recenti usando altezze fisse o l'allineamento con Flexbox prima di aggiungere subgrid come miglioramento:
<div class="card-grid"><div class="card">Card content</div></div>Verifica rapida
Che cosa fa grid-template-rows: subgrid su un elemento della griglia?
Riepilogo
Subgrid risolve il problema dell'allineamento dei contenuti di griglie annidate, ad esempio nelle griglie di schede in cui gli elementi di schede separate devono allinearsi alla stessa linea di base. Utilizzi grid-template-rows: subgrid sugli elementi della griglia che si estendono su più righe e grid-template-columns: subgrid per i contenuti annidati allineati per colonna. Oggi il supporto nei browser moderni è universale.
Domande Frequenti
La lezione «Subgrid per contenuti annidati allineati» è gratuita?
Sì — il testo completo di «Subgrid per contenuti annidati allineati» è 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 «Subgrid per contenuti annidati allineati»?
Utilizzi subgrid per allineare gli elementi della griglia annidata alle tracce della griglia genitore. 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 4 di 4.
Quanto tempo richiede la lezione «Subgrid per contenuti annidati allineati»?
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