Display grid e colonne e righe del template
Attivate CSS Grid e definite le tracce di colonne e righe utilizzando grid-template-columns e grid-template-rows.
Display grid e colonne e righe del template è 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.
Attivare CSS Grid
CSS Grid si attiva impostando display: grid su un contenitore. I suoi figli diretti diventano automaticamente elementi della griglia e vengono disposti nelle celle.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">Item A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">Item B</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">Item C</div>
</div>grid-template-columns
grid-template-columns definisce il numero e la dimensione delle colonne. Ogni valore crea una traccia di colonna.
<div class="layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">200px column</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr column</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">1fr column</div>
</div>grid-template-rows
grid-template-rows definisce le tracce di riga esplicite. Gli elementi oltre le righe definite creano righe implicite.
<div class="layout" style="min-height:220px;">
<div style="grid-column:span 2;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header (row: auto)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main left (row: 1fr)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main right (row: 1fr)</div>
<div style="grid-column:span 2;background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer (row: auto)</div>
</div>Tracce di colonne e righe
Ogni valore in grid-template-columns o grid-template-rows crea una traccia. Le tracce possono utilizzare qualsiasi unità di dimensione:
- Fissa:
200px,10rem - Flessibile:
1fr - Basata sul contenuto:
auto,min-content,max-content
L'unità fr
fr (unità frazionaria) distribuisce lo spazio disponibile dopo aver sottratto le dimensioni fisse. 1fr 2fr crea colonne in proporzione 1:2.
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:12px;border-radius:4px;">300px fixed</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:12px;border-radius:4px;">1fr (1x share)</div>
<div style="background:#7ee78722;border:1px solid #7ee787;padding:12px;border-radius:4px;">2fr (2x share)</div>
</div>auto nelle tracce
auto in una traccia determina le dimensioni in base al contenuto. Come colonna, occupa lo spazio minimo richiesto dalla cella più larga; come riga, si adatta alla cella più alta.
<div class="sidebar-layout">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Sidebar (auto width)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main content (1fr fills the rest)</div>
</div>Esempio di layout di pagina
Un layout comune di pagina su tre righe, con intestazione, contenuto principale e piè di pagina:
<div class="page">
<header style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</header>
<main style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main (fills available space)</main>
<footer style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</footer>
</div>Abbreviazione grid-template
grid-template combina righe e colonne:
<div class="grid" style="display:grid;min-height:180px;">
<div style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Main</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Footer</div>
</div>Ispezionare Grid in DevTools
Chrome e Firefox DevTools possono sovrapporre le linee delle tracce della griglia alla pagina. Faccia clic sul badge della griglia nel pannello Elements per visualizzare colonne, righe, spazi e aree denominate.
Scelta tra Grid e Flexbox
Utilizzi Grid quando deve controllare contemporaneamente righe e colonne. Utilizzi Flexbox per i layout monodimensionali, ad esempio una riga di elementi o una colonna di elementi. Molti layout utilizzano entrambi.
Numeri delle linee
Grid numera automaticamente le proprie linee a partire da 1. Può fare riferimento a questi numeri per posizionare manualmente gli elementi. Le linee delle colonne vanno da 1 a n+1, dove n è il numero di colonne.
<div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;">
<div class="header" style="grid-column:1 / -1;background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Header — spans all columns (grid-column: 1 / -1)</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Item 2</div>
<div style="background:#7ee78722;border:1px solid #34c759;padding:8px;">Item 3</div>
</div>Verifica rapida
Che cosa crea grid-template-columns: 200px 1fr 2fr?
Riepilogo
display: grid crea un contenitore grid. grid-template-columns e grid-template-rows definiscono le tracce. L'unità fr distribuisce proporzionalmente lo spazio rimanente. auto determina le dimensioni in base al contenuto. Grid è ideale per controllare i layout bidimensionali.
Domande Frequenti
La lezione «Display grid e colonne e righe del template» è gratuita?
Sì — il testo completo di «Display grid e colonne e righe del template» è 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 «Display grid e colonne e righe del template»?
Attivate CSS Grid e definite le tracce di colonne e righe utilizzando grid-template-columns e grid-template-rows. 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 «Display grid e colonne e righe del template»?
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
- Display grid e colonne e righe del template
- L'unità fr e repeat
- Gap e posizionamento nella griglia
- Aree del template della griglia