Linee e aree della griglia denominate
Assegni nomi alle linee e alle aree della griglia per rendere il posizionamento più leggibile e manutenibile.
Linee e aree della griglia denominate è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 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.
Denominare le linee della griglia
È possibile assegnare nomi alle linee della griglia racchiudendoli tra parentesi quadre all'interno di grid-template-columns e grid-template-rows. Le linee denominate rendono il codice di posizionamento più leggibile rispetto all'uso di numeri non descrittivi.
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>Posizionare gli elementi con linee denominate
Utilizzi le linee denominate in grid-column e grid-row per un posizionamento più leggibile:
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>Nomi delle linee con -start e -end
Quando definisce aree denominate con grid-template-areas, CSS crea automaticamente linee denominate con i suffissi -start e -end a cui può fare riferimento.
<div class="layout">
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
</div>Ripetere le linee denominate
Quando utilizza repeat(), può includere i nomi all'interno dello schema ripetuto. Alle linee vengono aggiunti suffissi numerici per distinguerle.
<div class="grid">
<div>1</div><div>2</div><div>3</div>
</div>Estensione tra linee denominate
Utilizzi le linee denominate con span per estendersi su un numero specifico di tracce denominate:
<div class="grid">
<div class="header">Header spans 3</div>
<div>A</div><div>B</div><div>C</div>
</div>Riepilogo delle aree denominate
Le aree denominate (tramite grid-template-areas) sono l'approccio più leggibile per posizionare gli elementi:
<div class="page">
<header>Header</header>
<div class="sidebar">Sidebar</div>
<div class="main">Main</div>
<div class="footer">Footer</div>
</div>Linee denominate per layout complessi
Le linee denominate sono particolarmente utili nei layout editoriali complessi con più elementi estesi:
<div class="magazine">
<div class="full-bleed">Full bleed banner</div>
<div class="article">Article content</div>
</div>Combinare nomi e numeri
È possibile combinare liberamente linee denominate e numeri di linea nella stessa griglia:
<div class="layout"><div class="item">Item</div></div>Più nomi sulla stessa linea
Una singola linea può avere più nomi, utile quando funge sia da fine di un'area sia da inizio di un'altra:
<div class="grid">
<div>Sidebar</div>
<div>Content</div>
</div>Linee denominate implicite dalle aree
Se definisce un'area denominata "main", vengono create automaticamente le linee main-start (di colonna e di riga) e main-end, che può utilizzare per gli elementi sovrapposti.
Debug delle linee denominate in DevTools
DevTools di Chrome e Firefox può visualizzare le linee della griglia denominate come etichette nella sovrapposizione. Abiliti le etichette delle linee nel pannello Layout per verificare che i nomi siano corretti.
Verifica rapida
Quando definisce l'area della griglia denominata "sidebar" in grid-template-areas, quali nomi di linea vengono creati automaticamente?
Riepilogo
Denomini le linee della griglia tra parentesi quadre all'interno delle definizioni delle tracce per ottenere un posizionamento leggibile. Le aree denominate generano automaticamente nomi di linea con i suffissi -start e -end. Una linea può avere più nomi. Le linee denominate si combinano liberamente con span e con i numeri. Utilizzi DevTools per visualizzare le linee denominate come sovrapposizioni.
Impara CSS con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 40
- Lezioni
- 159
Domande Frequenti
La lezione «Linee e aree della griglia denominate» è gratuita?
Sì — il testo completo di «Linee e aree della griglia denominate» è 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 «Linee e aree della griglia denominate»?
Assegni nomi alle linee e alle aree della griglia per rendere il posizionamento più leggibile e manutenibile. 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 1 di 4.
Quanto tempo richiede la lezione «Linee e aree della griglia denominate»?
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