Prerequisiti: gli argomenti delle unità precedenti.
Tracce, linee e item della griglia
Tracce, linee e item della griglia: fondamenti.
display: grid organizza i figli diretti in una griglia di righe e colonne. È utile quando occorre mantenere relazioni su due dimensioni, per esempio un insieme di schede con colonne allineate. grid-template-columns definisce le tracce di colonna; le righe possono essere create implicitamente quando aumentano gli elementi. Una traccia è lo spazio tra due linee della griglia. Gli elementi vengono collocati automaticamente seguendo le regole del flusso della griglia se non assegni posizioni esplicite.
Come funziona: tracce, linee e item della griglia
Tracce, linee e item della griglia: comportamento nel browser.
L’unità fr distribuisce una quota dello spazio disponibile alle tracce flessibili dopo aver considerato le altre dimensioni e i gap. Non equivale a una percentuale dell’intera finestra. repeat(3, minmax(0, 1fr)) crea tre colonne con un minimo esplicito di zero e massimi flessibili uguali. Il minimo evita che alcuni contenuti impongano alla traccia il minimo automatico implicito di una semplice 1fr. Occorre comunque gestire il testo lungo all’interno degli elementi.
Scelte di utilizzo e limiti
Tracce, linee e item della griglia: progetto e verifica.
gap separa righe e colonne. grid-column: span 2 fa occupare a un elemento due tracce nell’asse delle colonne. La collocazione visuale non riscrive l’ordine dell’HTML: conserva una sequenza sensata per lettura e tastiera. Per questo primo laboratorio usiamo colonne esplicite e posizionamento automatico; nel responsive cambieremo il numero di colonne secondo lo spazio disponibile.
Esempio commentato
Tracce, linee e item della griglia: HTML e CSS.
Esempio con stile esterno. Il documento index.html collega il file stile.css mediante il tag link nella head.
Documento HTML completo
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contenitore e struttura della griglia</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div class="griglia">
<article class="scheda">Uno</article>
<article class="scheda">Due</article>
<article class="scheda">Tre</article>
<article class="scheda">Quattro</article>
</div>
</body>
</html>
File stile.css
.griglia {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.scheda {
padding: 1rem;
border: 1px solid #174a7e;
overflow-wrap: anywhere;
}
Risultato nel browser
Tre schede riempiono la prima riga; la quarta inizia la seconda. Le colonne condividono lo spazio disponibile e gap mantiene le distanze.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
display | grid | Tipo di scatola e contesto di layout. |
grid-template-columns | repeat(3, minmax(0, 1fr)) | Definizione delle tracce di colonna esplicite. |
gap | 1rem | Distanza fra elementi o tracce nel layout pertinente. |
padding | 1rem | Spazio interno fra contenuto e bordo. |
border | 1px solid #174a7e | Abbreviazione per spessore, stile e colore del bordo. |
overflow-wrap | anywhere | Opportunità di interruzione per stringhe lunghe. |
LABORATORIO
Sperimentare: Tracce, linee e item della griglia
Tre schede riempiono la prima riga; la quarta inizia la seconda. Le colonne condividono lo spazio disponibile e gap mantiene le distanze.
Obiettivo: Comprendere e applicare tracce, linee e item della griglia attraverso esempi e verifica nel browser.
Software: editor di testo e browser con DevTools; Tempo: 15 minuti.
Preparazione: scarica l’esempio completo e estrai lo ZIP. Apri index.html nel browser. Puoi anche aprire l’esempio online.
Apri il file stile.css nell’editor. Le lezioni iniziali usano un documento già preparato per concentrarsi sulle regole; il collegamento esterno e lo stile interno vengono spiegati nelle lezioni dedicate. Le modifiche nei DevTools sono normalmente temporanee.
Procedura passo passo
- Osserva il punto di partenza: apri l’esempio, confronta markup e regole e individua il selettore o il contesto di layout rilevante.
- Esegui la modifica: Conta linee e tracce: tre colonne hanno quattro linee verticali.
- Salva e ricarica la pagina dopo ogni modifica. Confronta gli elementi che devono cambiare con quelli che devono restare invariati.
- Ispeziona il risultato: usa il menu Ispeziona e controlla Styles/Regole e Computed/Calcolato. Per layout Flex o Grid attiva l’overlay, se disponibile.
- Annota causa ed effetto: scrivi il valore o la struttura iniziale, il cambiamento e il risultato. Ripristina il punto di partenza prima dell’esercizio autonomo.
Con due colonne le quattro schede formano normalmente due righe. La prima scheda con span 2 occupa entrambe le colonne e le successive continuano nelle righe seguenti.
Il font e alcuni dettagli dell’interfaccia dipendono dal browser. Valuta la proprietà e il comportamento descritti, non una corrispondenza perfetta con uno screenshot.
Verifica del risultato
| Controllo | Criterio |
|---|---|
| Effetto specifico | Con due colonne le quattro schede formano normalmente due righe. La prima scheda con span 2 occupa entrambe le colonne e le successive continuano nelle righe seguenti. |
| Corrispondenza del codice | Individua la dichiarazione o la relazione HTML responsabile della differenza. |
| Persistenza | Riporta la modifica nel file e verifica dopo un ricaricamento. |
| Spiegazione | Motiva la differenza senza affidarti soltanto a uno screenshot. |
Esercizio autonomo
Crea due colonne con rapporto flessibile 2:1, consentendo il restringimento delle tracce.
Consegna: file modificati e una breve spiegazione di selettore, proprietà e risultato. Criterio di riuscita: il cambiamento richiesto funziona dopo il ricaricamento e non taglia informazioni indispensabili.
.griglia {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
gap: 1rem;
}Integra la soluzione nel punto pertinente: modifica o sostituisci le regole coinvolte invece di accumulare dichiarazioni contraddittorie. Le altre parti dell’esempio restano necessarie.
Verifica dei concetti
Tracce, linee e item della griglia: interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. Quali elementi diventano grid item? ▾
2. Come si interpreta il codice dell’esempio? ▾
3. Quale risultato permette di verificare la modifica del laboratorio? ▾
4. Quale attenzione evita un’interpretazione sbagliata? ▾
Riferimento tecnico: MDN — riferimento CSS. Cerca le proprietà o i selettori utilizzati nell’esempio.