Corso di CSS / Basi di CSS Grid: tracce, linee e posizionamento

CSS Grid definisce righe e colonne per il layout bidimensionale e posiziona gli elementi figli diretti in quella griglia. Le linee della griglia delimitano tracce e celle; un elemento può estendersi su più tracce senza cambiare l'ordine del documento.

Identificare contenitori, linee, tracce, celle e aree

Un contenitore Grid è un elemento padre che applica display: grid, e gli elementi Grid sono figli diretti di quel padre. I figli all'interno del primo figlio non sono elementi indipendenti nella griglia esterna. Disegnare una griglia in CSS non crea nuovi elementi HTML; cambia solo il modo in cui calcoliamo dove cadrà ciascun figlio nella griglia.

I numeri delle linee e i numeri delle colonne sono diversi. Se conti fino al bordo esterno delle due colonne, i numeri delle linee sono 1·2·3. Se posizioni un elemento sulle linee da 1 a 3, occuperà due colonne. gap è lo spazio tra le tracce e viene calcolato separatamente dal padding o dal bordo dell'elemento. È facile vedere i numeri delle linee e le aree effettive attivando la visualizzazione della griglia negli Elementi negli Strumenti per sviluppatori. La guida MDN ai concetti di base di Grid riassume i termini e le operazioni di base.

Definisci le colonne con px, percentuali e fr

.grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
}

Questo codice parziale può essere confrontato sostituendo le dichiarazioni delle colonne all'interno della regola .grid dell'esempio completo. La prima colonna utilizza 160px e la seconda colonna utilizza lo spazio rimanente. fr è una frazione, che divide lo spazio rimanente secondo un rapporto dopo aver considerato le altre tracce e gli spazi. Congelare la prima colonna senza considerare il contenuto può rendere il corpo troppo stretto per schermi ristretti, quindi valuta questo in base al contenuto effettivo.

In un contenitore con una larghezza di 640px, se lo spazio tra le colonne (gap) è di 16px e le due colonne sono 1fr·2fr, lo spazio da distribuire è di 624px. Se non ci sono vincoli di dimensione minima, la prima colonna è di 208px e la seconda colonna di 416px. L'esempio completo utilizza minmax(0, 1fr) minmax(0, 2fr) per garantire che la larghezza minima della traccia non sia fissata significativamente a causa del suo contenuto.

Se utilizzi 50% 50% e gap: 16px insieme, la larghezza del contenitore potrebbe già essere riempita solo con le colonne e poi il gap potrebbe essere aggiunto causando l'overflow. Per distribuire lo spazio residuo tra colonne flessibili, fr evita di aggiungere il gap a percentuali che occupano già tutta la larghezza. Questo non significa che tu debba rendere tutte le colonne dello stesso rapporto. La tua lista potrebbe avere bisogno di una piccola colonna per il nome e una colonna grande per la descrizione, e potresti anche voler usare una combinazione di colonne fisse e flessibili.

Confronta righe esplicite e implicite

grid-template-rows: 80px definisce esplicitamente una prima riga. Se non ci sono abbastanza righe per posizionare gli elementi successivi, viene creata una riga implicita e la sua dimensione può essere regolata con grid-auto-rows. Creare due colonne non ti limita a due righe.

Utilizzare una riga fissa dove esiste un requisito di dimensione chiaro, ma lasciare che le schede esplicative ospitino righe extra provenienti dalla traduzione o dal testo ingrandito. minmax(100px, auto) imposta un minimo e permette la crescita; non richiede che tutte le righe abbiano altezze identiche. Ogni riga dipende dal suo contenuto e dalle condizioni di layout. Per ulteriori dettagli, vedere MDN: grid-auto-rows .

Posizionare gli elementi con linee e span

.feature {
  grid-column: 1 / -1;
}
/* Different representations spanning two columns in the same two-column explicit grid */
/* .feature { grid-column: span 2; } */

1 / -1 significa dalla prima linea all’ultima linea della griglia esplicita. È adatto per titoli o aree evidenziate che occupano l’intera larghezza della griglia, sia che si tratti di due colonne o di una colonna sola. I numeri di linea negativi sono conteggiati rispetto alla fine della griglia esplicita e non rappresentano la fine di tutte le tracce generate automaticamente. Come regolare il numero e la dimensione minima delle colonne ripetute è confrontato in CSS Grid: repeat, auto-fit, auto-fill e aree.

span 2 significa occupare due tracce e, se non si specifica una linea di partenza precisa, il posizionamento automatico determinerà la posizione. Su mobile, se hai solo una colonna e mantieni span 2, potresti creare una colonna extra non voluta. Se vuoi mantenere la larghezza completa, usa 1 / -1 o rispecifica il valore di span su mobile. Quando minimizzi le specifiche di posizionamento, tutti gli elementi rimanenti andranno per default in celle vuote secondo l'ordine HTML.

Esegui l'esempio completo della Griglia

Salva il codice qui sotto come grid-basics.html e aprilo. A e B sono posizionati nella prima riga fissa, C è posizionato in una riga automatica in cui occupa tutte le colonne, e D e E sono posizionati nella riga automatica successiva. A 480px o meno le colonne diventano una e C continua a occupare l'intera larghezza.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-basics.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 grid-template-rows: 80px; grid-auto-rows: minmax(100px, auto); gap: 16px;
 width: min(100%, 640px); }
 .grid > div { min-width: 0; padding: 12px; background: #dceefa; overflow-wrap: anywhere; }
 .feature { grid-column: 1 / -1; }
 @media (max-width: 480px) { .grid { grid-template-columns: minmax(0, 1fr); } }
  </style>
</head>
<body>
<h1>Column proportions and row heights</h1>
<div class="grid"><div>A: first row</div><div>B: first row</div><div class="feature">C: Area that occupies two columns. As the content grows, the height of this auto-row also increases.</div><div>D: next line</div><div>E: This card has a long description. The height you need will vary depending on the length of your content. Instead of forcing all content to fit at a fixed height, set it to accommodate content beyond the minimum height.</div></div>
</body>
</html>

1. Su schermi ampi, assicurati che la larghezza della .grid sia di 640px e attiva Mostra griglia negli Strumenti per sviluppatori. Le colonne sono di 208px·416px e lo spazio tra di esse è di 16px. Se cambi il rapporto delle colonne a 1fr·1fr, diventano ciascuna 312px. Dopo il confronto, viene ripristinato a 1fr·2fr.
2. La prima riga ha un'altezza di 80px. Se aggiungi più righe di testo all'interno di A, l'altezza della riga stessa rimarrà la stessa e il contenuto potrebbe eccedere. Se riporti il testo allo stato originale e cambi grid-template-rows in minmax(80px, auto), può crescere a seconda del contenuto.
3. Aumenta sufficientemente i contenuti di C. grid-auto-rows è minmax(100px, auto) in modo che le righe possano essere più grandi di 100px. Modifica solo grid-auto-rows a 100px e osserva la differenza nelle righe fisse, poi riportalo al valore originale.
4. Se rimuovi solo la dichiarazione grid-column di C, C sarà posizionato in una cella e la posizione degli elementi dietro di esso cambierà anche. Ripristina 1/-1 di nuovo. Restringi lo schermo sotto 480px per vedere se la specifica della larghezza complessiva viene mantenuta in 1 colonna.

Gestisci contenuti lunghi su schermi stretti

La traccia 1fr della griglia può diventare larga a causa di lunghe stringhe a causa della dimensione minima automatica predefinita. minmax(0, 1fr) è un metodo per impostare la dimensione minima della traccia a 0, e le interruzioni di linea effettive nella stringa richiedono regole separate. min-width: 0 viene applicato anche all'elemento stesso a seconda della situazione. Salva il seguente codice come grid-long-text.html. Se gli elementi traboccano oltre la colonna, controlla Overflow CSS, testo lungo a capo e puntini di sospensione per le regole di interruzione delle stringhe lunghe.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-long-text.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
 width: min(100%, 600px); }
 .grid > div { padding: 12px; background: #e8f5de; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>Grid minimum size and long strings</h1><div class="grid"><div>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</div><div>A description of ordinary length</div></div>
</body>
</html>

1. Cambia solo overflow-wrap a normal per confermare che le lettere possono traboccare anche se la larghezza della traccia viene mantenuta.
2. Se sostituisci entrambe le colonne con 1fr 1fr, puoi vedere come la dimensione minima di una lunga stringa influenza la distribuzione delle colonne. Dopo il confronto, ripristiniamo entrambe minmax(0, 1fr) e anywhere.

Scegli un punto di transizione responsive basato sulla larghezza effettiva di lettura del contenuto piuttosto che sul nome del dispositivo. I 480px in questo esempio sono una scelta didattica e non uno standard per tutte le Griglie. Puoi restringere lo schermo e ingrandire il testo per vedere righe fisse, stringhe lunghe e colonne extra create dagli span per aiutarti a isolare la causa dell'overflow.