CSS Grid Layout Cum se utilizează minmax ()

Modul de configurare a rețelei CSS ia designul receptiv la nivelul următor, introducând un un nou tip de flexibilitate care nu a fost văzut niciodată înainte. Acum, putem nu numai definiți grilaje personalizate cu viteză rapidă numai cu CSS pur, dar Gridul CSS are de asemenea multe pietre ascunse care ne permit să îmbunătățim în continuare grila și să realizăm structuri complicate.

minim maxim() funcţie este una dintre aceste caracteristici mai puțin cunoscute. Aceasta face posibilă definirea mărimii unei piste de grilă ca minimum la intervalul maxim astfel încât grilă să se poată adapta la portul de vizualizare al fiecărui utilizator în cel mai bun mod posibil.

Sintaxă

Sintaxa lui minim maxim() funcția este relativ simplă, este nevoie două argumente: valoare minimă și maximă:

 minmax (min, max) 

min valoare trebuie să fie mai mică decât max, in caz contrar max este ignorat de browser.

Putem folosi minim maxim() funcționează ca valoarea grilă matriță coloane sau grid-șablon rânduri proprietate (sau ambele). În exemplul nostru, vom folosi primul, deoarece este un caz de utilizare mult mai frecvent.

 .container display: grilă; grilă-șablon-coloane: minmax (100px, 200px) 1fr 1fr; grilă-șablon-rânduri: 100px 100px 100px; grilă-decalaj: 10 pixeli;  

În demonstrația Codepen de mai jos, puteți găsi Codul HTML și CSS vom folosi în tot articolul.

Putem folosi diferite tipuri de valori în interiorul minim maxim() funcție, totul depinde de tipul de grila personalizată pe care dorim să o creăm.

Valori ale lungimii statice

Există două moduri de bază cum putem folosi minim maxim() funcția cu valorile statice ale lungimii.

În primul rând, putem folosi minim maxim() numai pentru o coloană de grilă și definiți lățimea celorlalte coloane drept valori statice simple (aici sunt pixeli).

 grilă-șablon-coloane: minmax (100px, 200px) 200px 200px; 

În demo-ul de mai jos, puteți vedea că acest aspect este nu este receptiv, totuși prima coloană are o anumită flexibilitate. Cea de-a doua și a treia coloană își păstrează lățimea fixă ​​(200px), în timp ce prima coloană variază de la 100px la 200px, pe baza spațiului disponibil.

În al doilea rând, putem defini lățimea lui mai mult de o coloană de grilă utilizând minim maxim(). Valorile min și max sunt atât statice, deci implicit, grila este nu este receptiv. Cu toate acestea, coloanele în sine sunt flexibil, dar numai între 100 și 200 de pixeli. ei să crească și să se micșoreze simultan pe măsură ce schimbăm mărimea ferestrei de vizualizare.

 grilă-șablon-coloane: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

Rețineți că putem, de asemenea folosește repeta() funcţie cugehter cu minim maxim(). Deci, fragmentul de cod anterior poate fi scris astfel:

 grilă-șablon-coloane: repetați (3, minmax (100px, 200px)); 

Valori dinamice ale lungimii

În afară de valorile statice, minim maxim() funcția acceptă, de asemenea unități procentuale si fracțiune nouă (fr) ca argumente. Prin utilizarea lor, putem realiza grilaje personalizate care sunt ambele sensibil și schimba dimensiunile lor în funcție de spațiul disponibil.

Codul de mai jos are ca rezultat o rețea în care lățimea primei coloane variază între 50% și 80% în timp ce al doilea și al treilea împărțiți în mod egal spațiul rămas.

 grilă-șablon-coloane: minmax (50%, 80%) 1fr 1fr; 

Când folosim valorile dinamice cu minim maxim() funcția, este esențial să configurați o regulă care are sens. Permiteți-mi să vă arăt un exemplu în care grilă se prăbușește:

 grilă-șablon-coloane: minmax (1fr, 2fr) 1fr 1fr; 

Această regulă nu are sens, așa cum este browserul incapabil să decidă care merită să se atribuie minim maxim() funcţie. Valoarea minimă ar duce la a 1fr 1fr 1fr lățimea coloanei, în timp ce maximul la 2fr 1fr 1fr. Dar, ambele sunt posibile chiar și pe un ecran foarte mic. Există nimic de care browserul se poate referi.

Iată rezultatul:

Combinați valorile statice și dinamice

Este, de asemenea, posibil să combină valorile statice și dinamice. De exemplu, în demo-ul Codepen de mai sus, am folosit minmax (100px, 200px) 1fr 1fr; regulă care are ca rezultat o rețea în care se află prima coloană variază între 100px și 200px și spațiul rămas este împărțit în mod egal între celelalte două.

 grilă-șablon-coloane: minmax (100px, 200px) 1fr 1fr; 

Este interesant să observăm că, pe măsură ce crește fereastra de vizualizare, prima coloană crește de la 100px la 200px. Celelalte două, conduse de unitatea fr, încep să crească numai după ce prima a atins lățimea maximă. Acest lucru este logic, deoarece scopul unității fracționare este de a împărți spațiul disponibil (rămas).

min conținut, max conținut, și auto Cuvinte cheie

E a al treilea tip de valoare putem aloca minim maxim() funcţie. min conținut, max conținut, și auto cuvintele cheie se referă la dimensiunile unei linii de rețea la conținutul pe care îl conține.

max conținut

max conținut cuvinte cheie direcționează browserul pe care trebuie să fie coloana grilajului la fel de larg ca cel mai larg element pe care îl conține.

Pe demo-ul de mai jos, am plasat a Imagine la nivel de 400px în interiorul primei linii de rețea și a folosit următoarea regulă CSS (puteți găsi o demonstrație Codepen cu codul complet modificat la sfârșitul articolului):

 .container grid-template-coloane: max-content 1fr 1fr; / ** * Același lucru cu notația minmax (): * grid-template-coloane: minmax (max-content, max-content) 1fr 1fr; * / 

Nu am folosit-o minim maxim() notație încă, dar în codul de mai sus puteți vedea cum ar arăta același cod cu el (deși este inutil aici).

După cum puteți vedea, prima coloană a grilei este la fel de largă ca elementul cel mai larg (aici imaginea). În acest fel, utilizatorii pot vedea întotdeauna imaginea în dimensiune completă. Cu toate acestea, sub o anumită dimensiune a ferestrei de vizualizare, acest aspect este nu este receptiv.

min conținut

min conținut cuvinte cheie direcționează browserul că coloana grila trebuie să fie la fel de lată cel mai îngust element pe care îl conține, într-un fel nu duce la o supraincarcare.

Să vedem cum arată demo-ul anterior cu imaginea dacă schimbăm valoarea primei coloane min conținut:

 .container grid-template-coloane: min-content 1fr 1fr; / ** * Același lucru cu notația minmax (): * grid-template-coloane: minmax (min-content, min-content) 1fr 1fr; * / 

Am lăsat fundalul verde de sub imagine, astfel încât să puteți vedea dimensiunea completă a primei celule de rețea.

După cum puteți vedea, prima coloană păstrează cea mai mică lățime poate fi obținută fără o depășire. În acest exemplu, acest lucru va fi definit de lățimea minimă a celulelor 4 și 7 din rețea, care rezultă din umplutură și marimea fontului proprietăți, ca imaginea din prima celulă ar putea fi redus la zero fără depășire.

Dacă celula de rețea conținea un șir de text, min conținut va fi egală cu lățimea celui mai lung cuvânt, deoarece acesta este cel mai mic element care nu poate fi înrăutățit în continuare fără supraîncărcare. Iată un mare articol de BitsOfCode unde puteți vedea cum min conținut și max conținut se comporta atunci când celula de rețea conține un șir de text.

Utilizarea min conținut și max conținut împreună

Dacă noi utilizare min conținut și max conținut împreună în interiorul minim maxim() funcția obținem o coloană de grilă care:

1. este receptiv
2. nu are nici un overflow
3. nu creste mai mult decat cel mai larg element

 .container grilă-șablon-coloane: minmax (min-conținut, conținut maxim) 1fr 1fr;  

Putem folosi, de asemenea, min conținut și max conținut Cuvinte cheie împreună cu alte valori ale lungimii în interiorul minim maxim() funcție, până când regula are sens. De exemplu, minmax (25%, conținut maxim) sau minmax (min-conținut, 300px) ar fi ambele norme valabile.

auto

În cele din urmă, putem folosi și auto cuvinte cheie ca argument al minim maxim() funcţie.

Cand auto este utilizat ca maxim, valoarea sa este identică cu max conținut.

Când este folosit ca un minim, valoarea sa este specificată de min lățime / min înălțime regula, ceea ce înseamnă că auto este uneori identică cu min conținut, dar nu intotdeauna.

În exemplul nostru precedent, min conținut este egal cu auto, deoarece lățimea minimă a primei coloane este întotdeauna mai mică decât înălțimea minimă. Deci, regula CSS aparținând:

 .container grilă-șablon-coloane: minmax (min-conținut, conținut maxim) 1fr 1fr;  

ar putea fi, de asemenea, scris astfel:

 .container grilă-șablon-coloane: minmax (auto, auto) 1fr 1fr;  

auto poate fi și cuvântul cheie utilizat împreună cu alte unități statice și dinamice (pixeli, unități fr, procente etc.) în interiorul minim maxim() funcția, de exemplu minmax (auto, 300px) ar fi o regulă valabilă.

Puteți testa cum min conținut, max conținut, și auto cuvintele cheie lucrează cu minim maxim() în următoarea demonstrație Codepen: