Prerequisiti: Unità fr e funzione repeat().
Limiti delle tracce con minmax()
Limiti delle tracce con minmax(): fondamenti.
minmax(minimo, massimo) definisce una gamma per una traccia Grid. Il minimo deve essere una misura appropriata; il massimo può essere flessibile come 1fr. minmax(12rem, 1fr) non indica una larghezza sempre uguale a 12rem: quella è la soglia inferiore, mentre lo spazio residuo può far crescere la traccia.
Come funziona: limiti delle tracce con minmax()
Limiti delle tracce con minmax(): comportamento nel browser.
Una soglia minima troppo grande può rendere la griglia più larga del viewport. minmax(0, 1fr) è utile quando il minimo automatico del contenuto deve essere ridotto, ma non garantisce da solo che il testo rimanga leggibile. minmax() appartiene al dimensionamento delle tracce, non si usa direttamente come valore di width di una scatola ordinaria.
Scelte di utilizzo e limiti
Limiti delle tracce con minmax(): progetto e verifica.
Quando combini più tracce, somma minimi e gap per capire se il contenitore offre abbastanza spazio. Se due colonne da almeno 12rem più un gap non entrano, la griglia esplicita non diventa automaticamente una colonna: occorre una strategia responsive, una media query o una ripetizione adattiva.
Esempio commentato
Limiti delle tracce con minmax(): 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>Dimensionamento con minmax()</title>
<link rel="stylesheet" href="stile.css">
</head>
<body>
<div class="griglia"><article>Una traccia</article><article>Una seconda traccia</article></div>
</body>
</html>
File stile.css
.griglia { display: grid; grid-template-columns: repeat(2, minmax(12rem, 1fr)); gap: 1rem; }
.griglia > article { padding: 1rem; border: 1px solid navy; }
Risultato nel browser
Le colonne hanno un minimo di 12rem ciascuna e possono crescere per usare spazio disponibile.
| Proprietà | Valore nell’esempio | Significato |
|---|---|---|
display | grid | Tipo di scatola e contesto di layout. |
grid-template-columns | repeat(2, minmax(12rem, 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 navy | Abbreviazione per spessore, stile e colore del bordo. |
LABORATORIO
Sperimentare: Limiti delle tracce con minmax()
Le colonne hanno un minimo di 12rem ciascuna e possono crescere per usare spazio disponibile.
Obiettivo: Comprendere e applicare limiti delle tracce con minmax() 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: Restringi il contenitore sotto la somma dei minimi e del gap.
- 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.
Le tracce non scendono sotto il minimo dichiarato e possono provocare overflow. Non è un errore di sintassi.
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 | Le tracce non scendono sotto il minimo dichiarato e possono provocare overflow. Non è un errore di sintassi. |
| 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
Permetti alle due tracce di ridursi usando un minimo di zero.
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 { grid-template-columns: repeat(2, minmax(0, 1fr)); }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
Limiti delle tracce con minmax(): interpretazione e applicazione.
Seleziona una domanda per visualizzare la risposta e confrontarla con la tua.
1. In minmax(12rem, 1fr), 12rem rappresenta che cosa? ▾
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.