Izgled CSS mreže Kako koristiti minmax ()

CSS modul rasporeda mreže uvodi odgovarajući dizajn na sljedeću razinu uvođenjem a nova vrsta fleksibilnosti koji nikad prije nije viđen. Sada, ne možemo samo definirati prilagođene rešetke blistavo brzo isključivo s čistim CSS-om, ali CSS Grid također ima mnogo skrivenih dragulja koji nam omogućuju daljnje podešavanje mreže i postizanje kompliciranih izgleda.

minmax () funkcija je jedna od tih manje poznatih značajki. Omogućuje definiranje veličine mrežne staze kao minimum do maksimalnog raspona tako da se mreža može prilagoditi vidnom polju svakog korisnika na najbolji mogući način.

Sintaksa

Sintaksa minmax () funkcija je relativno jednostavna dva argumenta: minimalna i maksimalna vrijednost:

 minmax (min, max) 

min vrijednost mora biti manji od maksimum, inače maksimum preglednik zanemaruje.

Možemo koristiti minmax () funkcija kao vrijednost mreža-template-kolone ili rešetke predloška-redaka vlasništvo (ili oboje). U našem primjeru, koristit ćemo prvi, jer je to mnogo češći slučaj uporabe.

 .spremnik prikaz: rešetka; grid-template-stupci: minmax (100px, 200px) 1fr 1fr; grid-template-redaka: 100px 100px 100px; rascjep mreže: 10px;  

U prikazu Codepen ispod možete pronaći HTML i CSS kod koristit ćemo u cijelom članku.

Možemo koristiti različite vrste vrijednosti unutar minmax () funkcija ovisi o vrsti prilagođene mreže koju želimo stvoriti.

Statičke vrijednosti duljine

Postoje dva osnovna načina kako možemo koristiti minmax () s statičke vrijednosti duljine.

Prvo, možemo koristiti minmax () samo za jedan stupac mreže i definiraju širinu ostalih stupaca kao jednostavne statičke vrijednosti (ovdje pikseli).

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

Na donjoj gif demo, možete vidjeti da je ovaj izgled ne odgovara, no prvi stupac ima neka fleksibilnost. Drugi i treći stupac zadržavaju fiksnu širinu (200 px), dok se prvi stupac kreće od 100px do 200px, na temelju dostupnog prostora.

Drugo, možemo definirati širinu više stupaca mreže koristeći minmax (). Min i max vrijednosti su obje statičke, tako da je zadana, grid je ne odgovara. Međutim, sami stupovi su fleksibilno, ali samo između 100px i 200px. Oni rasti i skupljati se istovremeno promjenom veličine prikaza.

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

Imajte na umu da također možemo koristiti ponoviti() funkcija zajedno s minmax (). Dakle, prethodni isječak koda može se napisati i ovako:

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

Vrijednosti dinamičke duljine

Osim statičkih vrijednosti, minmax () funkcija također prihvaća postotnih jedinica i nova jedinica frakcija (fr) kao argumente. Koristeći ih, možemo postići prilagođene rešetke koje su oboje uzvratni i promijenite njihove dimenzije prema dostupnom prostoru.

Donji kôd rezultira mrežom u kojoj je širina prvog stupca kreće se između 50% i 80% drugi i treći ravnomjerno podijelite preostali prostor.

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

Kada koristimo dinamičke vrijednosti sa minmax () funkcija, ključno je postaviti pravilo koje ima smisla. Pokazat ću vam primjer gdje rešetka se raspada:

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

Ovo pravilo nema smisla, kao što je preglednik ne mogu odlučiti koju vrijednost dodijeliti minmax () funkcija. Minimalna vrijednost bi dovela do 1fr 1fr 1fr širina stupca, dok je maksimum do 2fr 1fr 1fr. Ali, oba su moguća čak i na vrlo malom zaslonu. tu je s kojim se preglednik ne može odnositi.

Evo rezultata:

Kombinirajte statičke i dinamičke vrijednosti

Također je moguće kombiniraju statičke i dinamičke vrijednosti. Na primjer, u kodu Codepen iznad, koristio sam minmax (100px, 200px) 1fr 1fr; pravilo koje rezultira u mreži gdje se nalazi prvi stupac kreće se između 100px i 200px a preostali prostor je ravnomjerno podijeljena između ostala dva.

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

Interesantno je primijetiti da se, s obzirom na to da se pogled povećava, prvi stupac povećava sa 100px na 200px. Druga dva, kojima vlada fr jedinica, počinju rasti tek nakon što je prva dostigla maksimalnu širinu. To je logično, jer je cilj jedinice frakcija podjela raspoloživog (preostalog) prostora.

min Sadržaj, max-sadržaj, i auto ključne riječi

Tamo je treća vrsta vrijednosti možemo dodijeliti minmax () funkcija. min Sadržaj, max-sadržaj, i auto ključne riječi povezuju dimenzije staze mreže s oznakom sadržaj koji sadrži.

max-sadržaj

max-sadržaj ključna riječ usmjerava preglednik da stupac mreže mora biti širok kao najširi element koji sadrži.

Na demo ispod, stavio sam 400px široku sliku unutar prvog mrežnog kolosijeka i koristio je sljedeće CSS pravilo (na kraju članka možete naći demo Codepen s punim izmijenjenim kodom):

 .spremnik grid-template-stupovi: max-sadržaj 1fr 1fr; / ** * Isto s oznakom minmax (): * grid-template-stupci: minmax (max-content, max-content) 1fr 1fr; * / 

Nisam koristio minmax () notacija još, ali u komentaru gore navedenog koda možete vidjeti kako će izgledati isti kod (iako je suvišan ovdje).

Kao što možete vidjeti, prvi stupac mreže je širok kao i njegov najširi element (ovdje slika). Na taj način korisnici uvijek mogu vidjeti sliku u punoj veličini. Međutim, pod određenom veličinom prikaza, ovaj raspored je ne odgovara.

min Sadržaj

min Sadržaj ključna riječ usmjerava preglednik da stupac mreže mora biti širok kao i najuži element koji sadrži, na takav način ne dovodi do prelijevanja.

Pogledajmo kako izgleda prethodni demo sa slikom ako promijenimo vrijednost prvog stupca u min Sadržaj:

 .spremnik grid-template-stupci: min-sadržaj 1fr 1fr; / ** * Isto s oznakom minmax (): * grid-template-stupci: minmax (min-content, min-content) 1fr 1fr; * / 

Ostavio sam zelenu pozadinu ispod slike tako da možete vidjeti punu veličinu prve ćelije mreže.

Kao što možete vidjeti, prvi stupac zadržava najmanju širinu može se postići bez prelijevanja. U ovom primjeru, to će biti definirano minimalnom širinom četvrte i sedme ćelije rešetke, koja proizlazi iz punjenje i veličina fonta svojstva, kao slika u prvoj ćeliji može se smanjiti na nulu bez preljeva.

Ako je mrežna ćelija sadržavala tekstualni niz, min Sadržaj bilo bi jednaka širini najdulje riječi, jer to je najmanji element koji se ne može dodatno smanjiti bez prelijevanja. Evo odličnog članka BitsOfCode gdje možete vidjeti kako min Sadržaj i max-sadržaj ponašaju se kada mrežna ćelija sadrži tekstualni niz.

koristeći min Sadržaj i max-sadržaj zajedno

Ako mi koristiti min Sadržaj i max-sadržaj zajedno unutar minmax () funkcija dobiva se stupac mreže koji:

1. odgovara
2. nema prelijevanja
3. ne raste šire od najšireg elementa

 .spremnik grid-template-stupovi: minmax (min-sadržaj, max-sadržaj) 1fr 1fr;  

Možemo također koristiti min Sadržaj i max-sadržaj ključne riječi zajedno s drugim vrijednostima duljine unutar minmax () sve dok pravilo nema smisla. Na primjer, minmax (25%, max-sadržaj) ili minmax (min-content, 300px) bi bila oba valjana pravila.

auto

Konačno, možemo koristiti i auto ključna riječ kao argument minmax () funkcija.

Kada auto je koristi se kao maksimum, njegova je vrijednost identična max-sadržaj.

Kada je koristi se kao minimum, njegova je vrijednost određena min širine / min visine pravilo, što znači da auto ponekad je identičan min Sadržaj, ali ne uvijek.

U našem prethodnom primjeru, min Sadržaj ne odgovara auto, budući da je minimalna širina prvog stupca mreže uvijek manja od minimalne visine. Dakle, pripadajuće CSS pravilo:

 .spremnik grid-template-stupovi: minmax (min-sadržaj, max-sadržaj) 1fr 1fr;  

može biti napisana i ovako:

 .spremnik grid-template-column: minmax (auto, auto) 1fr 1fr;  

auto ključna riječ može biti koristi se zajedno s drugim statičkim i dinamičkim jedinicama (pikseli, fr jedinica, postoci, itd.) unutar minmax () na primjer minmax (auto, 300px) bi bilo valjano pravilo.

Možete testirati kako min Sadržaj, max-sadržaj, i auto ključne riječi rade s minmax () funkcija u sljedećem prikazu kodnog koda: