Layout della griglia CSS Come usare minmax ()

Il Modulo layout griglia CSS porta il design reattivo al livello successivo introducendo a nuovo tipo di flessibilità non è mai stato visto prima. Ora, non possiamo solo definire le griglie personalizzate incredibilmente veloce solo con puro CSS, ma anche la griglia CSS molte gemme nascoste questo ci consente di modificare ulteriormente la griglia e ottenere layout complicati.

Il minimo Massimo() funzione è una di queste funzionalità meno conosciute. Permette di definire la dimensione di una griglia dal minimo al massimo in modo che la griglia possa adattarsi al viewport di ciascun utente nel miglior modo possibile.

Sintassi

La sintassi del minimo Massimo() la funzione è relativamente semplice, ci vuole due argomenti: un valore minimo e un valore massimo:

 minmax (min, max) 

Il min valore deve essere più piccolo rispetto al max, altrimenti max viene ignorato dal browser.

Possiamo usare il minimo Massimo() funzione come il valore del grid-template-colonne o grid-template-righe proprietà (o entrambi). Nel nostro esempio, useremo il primo, poiché è un caso d'uso molto più frequente.

 .container display: grid; grid-template-columns: minmax (100px, 200px) 1fr 1fr; grid-template-rows: 100px 100px 100px; intercapedine: 10px;  

Nella demo di Codepen qui sotto, puoi trovare il Codice HTML e CSS useremo per tutto l'articolo.

Possiamo usare diverso tipo di valori dentro il minimo Massimo() funzione, tutto dipende dal tipo di griglia personalizzata che vogliamo creare.

Valori di lunghezza statici

Ci sono due modi fondamentali su come possiamo usare il minimo Massimo() funzione con valori di lunghezza statici.

In primo luogo, possiamo usare minimo Massimo() solo per una colonna della griglia e definisci la larghezza delle altre colonne come semplici valori statici (pixel qui).

 grid-template-columns: minmax (100px, 200px) 200px 200px; 

Nella demo gif qui sotto, puoi vedere che questo layout è non reattivo, tuttavia la prima colonna ha un po 'di flessibilità. La seconda e la terza colonna mantengono la larghezza fissa (200 px) mentre la prima colonna va da 100 px a 200 px, in base allo spazio disponibile.

In secondo luogo, possiamo definire la larghezza di più di una colonna della griglia utilizzando minimo Massimo(). I valori minimo e massimo sono entrambi statici, quindi per impostazione predefinita la griglia è non reattivo. Tuttavia, le colonne stesse sono flessibile, ma solo tra 100px e 200px. Essi crescere e rimpicciolirsi contemporaneamente quando cambiamo la dimensione della finestra.

 grid-template-columns: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

Nota che possiamo anche utilizzare il ripetere() funzione insieme minimo Massimo(). Quindi, lo snippet di codice precedente può anche essere scritto in questo modo:

 grid-template-columns: repeat (3, minmax (100px, 200px)); 

Valori di lunghezza dinamica

Oltre ai valori statici, il minimo Massimo() la funzione accetta anche unità percentuali e il nuova frazione (fr) unità come argomenti. Usandoli, possiamo ottenere griglie personalizzate che sono entrambe di risposta e cambia le loro dimensioni in base allo spazio disponibile.

Il codice seguente genera una griglia in cui la larghezza della prima colonna varia tra il 50% e l'80% mentre il secondo e il terzo condividere equamente lo spazio rimanente.

 grid-template-columns: minmax (50%, 80%) 1fr 1fr; 

Quando usiamo valori dinamici con il minimo Massimo() funzione, è fondamentale impostare a regola che ha un senso. Lascia che ti mostri un esempio in cui il la griglia cade a pezzi:

 grid-template-columns: minmax (1fr, 2fr) 1fr 1fr; 

Questa regola non ha alcun senso, come il browser incapace di decidere quale valore assegnare a minimo Massimo() funzione. Il valore minimo porterebbe a a 1fr 1fr 1fr larghezza della colonna, mentre il massimo a 2fr 1fr 1fr. Ma entrambi sono possibili anche su uno schermo molto piccolo. C'è nulla a cui il browser può riferirsi.

Ecco il risultato:

Combina valori statici e dinamici

È anche possibile combinare valori statici e dinamici. Ad esempio, nella demo di Codepen sopra, ho usato il minmax (100px, 200px) 1fr 1fr; regola che si traduce in una griglia in cui la prima colonna varia tra 100px e 200px e lo spazio rimanente è condiviso uniformemente tra gli altri due.

 grid-template-columns: minmax (100px, 200px) 1fr 1fr; 

È interessante osservare che mentre il viewport cresce, in primo luogo, la prima colonna cresce da 100 px a 200 px. Gli altri due, governati dall'unità fr, iniziano a crescere solo dopo che il primo ha raggiunto la sua larghezza massima. Questo è logico, in quanto l'obiettivo dell'unità di frazionamento è dividere lo spazio disponibile (rimanente).

Il min-content, max-content, e auto parole chiave

C'è un terzo tipo di valore possiamo assegnare al minimo Massimo() funzione. Il min-content, max-content, e auto le parole chiave collegano le dimensioni di una griglia alla contenuto che contiene.

max-content

Il max-content parola chiave dirige il browser che deve essere la colonna della griglia largo quanto l'elemento più largo che contiene.

Nella demo di seguito, ho inserito a Immagine di 400px-wide all'interno della prima traccia della griglia e ha utilizzato la seguente regola CSS (puoi trovare una demo Codepen con il codice completo alla fine dell'articolo):

 .container grid-template-columns: max-content 1fr 1fr; / ** * Lo stesso con la notazione minmax (): * grid-template-columns: minmax (max-content, max-content) 1fr 1fr; * / 

Non ho usato minimo Massimo() notazione ancora, ma nel commento di codice sopra puoi vedere come sarebbe lo stesso codice con esso (anche se qui è superfluo).

Come puoi vedere, la prima colonna della griglia è larga quanto il suo elemento più largo (qui l'immagine). In questo modo, gli utenti possono sempre vedere l'immagine a grandezza naturale. Tuttavia, sotto una certa dimensione della finestra, questo layout è non reattivo.

min-content

Il min-content parola chiave indica al browser che la colonna della griglia deve essere larga quanto la elemento più stretto che contiene, in un modo non porta a un overflow.

Vediamo come appare la demo precedente con l'immagine se cambiamo il valore della prima colonna in min-content:

 .container grid-template-columns: min-content 1fr 1fr; / ** * Lo stesso con la notazione minmax (): * grid-template-columns: minmax (min-content, min-content) 1fr 1fr; * / 

Ho lasciato lo sfondo verde sotto l'immagine in modo da poter vedere l'intera dimensione della prima cella della griglia.

Come puoi vedere, la prima colonna mantiene la larghezza minore può essere raggiunto senza un trabocco. In questo esempio, questo sarà definito dalla larghezza minima della 4a e 7a cella della griglia, che deriva dal imbottitura e dimensione del font proprietà, come l'immagine nella prima cella potrebbe essere ridotto a zero senza overflow.

Se la cella della griglia conteneva una stringa di testo, min-content sarebbe uguale alla larghezza della parola più lunga, poiché questo è l'elemento più piccolo che non può essere ulteriormente ridotto senza un trabocco. Ecco un ottimo articolo di BitsOfCode in cui puoi vedere come min-content e max-content si comportano quando la cella della griglia contiene una stringa di testo.

utilizzando min-content e max-content insieme

Se noi uso min-content e max-content insieme dentro il minimo Massimo() funzione otteniamo una colonna della griglia che:

1. è reattivo
2. non ha overflow
3. non cresce più del suo elemento più largo

 .container grid-template-columns: minmax (min-content, max-content) 1fr 1fr;  

Possiamo anche usare il min-content e max-content parole chiave insieme ad altri valori di lunghezza dentro il minimo Massimo() funzione, finché la regola non ha senso. Per esempio, minmax (25%, contenuto massimo) o minmax (min-content, 300px) sarebbero entrambe regole valide.

auto

Infine, possiamo anche usare il auto parola chiave come argomento del minimo Massimo() funzione.

quando auto è usato al massimo, il suo valore è identico a max-content.

Quando è usato come minimo, il suo valore è specificato dal min-width / min-height regola, il che significa che auto a volte è identico a min-content, ma non sempre.

Nel nostro esempio precedente, min-content fa uguale a auto, poiché la larghezza minima della prima colonna della griglia è sempre inferiore alla sua altezza minima. Quindi, la regola CSS appartenente:

 .container grid-template-columns: minmax (min-content, max-content) 1fr 1fr;  

potrebbe anche essere scritto in questo modo:

 .container grid-template-columns: minmax (auto, auto) 1fr 1fr;  

Il auto la parola chiave può anche essere usato insieme ad altre unità statiche e dinamiche (pixel, unità fr, percentuali, ecc.) all'interno di minimo Massimo() funzione, per esempio minmax (auto, 300px) sarebbe una regola valida.

Puoi testare come min-content, max-content, e auto le parole chiave funzionano con minimo Massimo() funzione nella seguente demo Codepen: