Postavitev omrežja CSS Kako uporabljati minmax ()

The Modul za postavitev mreže CSS odzivno oblikovanje na novo raven z uvedbo a nove vrste prilagodljivosti ki še ni bila videna. Zdaj, ne moremo samo definiranje omrežij po meri bliskovito hitro samo s čistim CSS-jem, vendar ima tudi CSS Grid veliko skritih draguljev ki nam omogočajo, da dodatno prilagodimo mrežo in dosežemo zapletene postavitve.

The minmax () funkcijo je ena od teh manj znanih funkcij. Omogoča določitev velikosti mrežne proge kot minimalno območje tako, da se lahko omrežje prilagodi vidnemu polju vsakega uporabnika na najboljši možen način.

Sintaksa

Skladnja minmax () funkcija je sorazmerno preprosta dva argumenta: najmanjša in najvišja vrednost:

 minmax (min, max) 

The min vrednost mora biti manjša kot maks, drugače maks brskalnik ne upošteva.

Lahko uporabimo minmax () funkcijo kot vrednost. \ t grid-template-stolpci ali grid-template-vrstice lastnost (ali oboje). V našem primeru bomo uporabili prvo, saj je veliko bolj pogost primer uporabe.

 .posoda prikaz: mreža; grid-template-column: minmax (100px, 200px) 1fr 1fr; grid-template-vrstice: 100px 100px 100px; vrzel v mreži: 10px;  

V predstavitvi Codepen spodaj lahko najdete HTML in CSS koda bomo uporabili v celotnem članku.

Lahko uporabimo različnih vrednot znotraj minmax () Funkcija je odvisna od vrste omrežij po meri, ki ga želimo ustvariti.

Statične vrednosti dolžine

Obstajata dva osnovna načina, kako lahko uporabimo minmax () funkcijo statične vrednosti dolžine.

Prvič, lahko uporabimo minmax () samo za en stolpec mreže in določite širino drugih stolpcev kot preproste statične vrednosti (slikovne pike tukaj).

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

Na spodnji predstavitvi gif lahko vidite, da je ta postavitev se ne odziva, vendar je v prvem stolpcu prilagodljivost. Drugi in tretji stolpec ohranita svojo fiksno širino (200 px), medtem ko se prvi stolpec giblje od 100px do 200px, na podlagi razpoložljivega prostora.

Drugič, lahko določimo širino več kot en stolpec mreže uporabo minmax (). Vrednosti min in max sta statični, zato je privzeto omrežje se ne odziva. Vendar so sami stebri prilagodljiv, vendar le med 100px in 200px. Oni hkrati rastejo in skrčijo ko spreminjamo velikost prikaza.

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

Upoštevajte, da lahko tudi mi uporabi ponovite () funkcijo skupaj z minmax (). Tudi prejšnji odrezek kode je lahko napisan takole:

 grid-template-column: ponovite (3, minmax (100px, 200px)); 

Vrednosti dinamične dolžine

Razen statičnih vrednosti minmax () funkcija tudi sprejema odstotnih enot in nova enota za frakcijo (fr) kot argumenti. Z njihovo uporabo lahko dosežemo prilagojena omrežja, ki so oboje odzivno in spremenite svoje dimenzije glede na razpoložljivi prostor.

Spodnja koda povzroči mrežo, v kateri je širina prvega stolpca se giblje med 50% in 80% drugi in tretji enakomerno porazdelite preostali prostor.

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

Ko uporabljamo dinamične vrednosti z minmax () funkcijo, je ključnega pomena, da nastavite a pravilo, ki je smiselno. Naj vam pokažem primer, kjer mreža se razpade:

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

To pravilo nima nobenega smisla, kot je brskalnik ne more odločiti katero vrednost dodeliti minmax () funkcijo. Najmanjša vrednost bi povzročila a 1fr 1fr 1fr širina stolpca, medtem ko je največja na 2fr 1fr 1fr. Ampak, oba sta mogoča tudi na zelo majhnem zaslonu. Obstaja se brskalnik ne more povezati.

Tukaj je rezultat:

Združite statične in dinamične vrednosti

Možno je tudi združujejo statične in dinamične vrednosti. Na primer, v demonu Codepen zgoraj sem uporabil minmax (100px, 200px) 1fr 1fr; pravilo, ki ima za posledico mrežo, kjer je prvi stolpec je med 100 in 200 slikovnih pik in preostali prostor je enakomerno porazdeljena med drugima dvema.

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

Zanimivo je opaziti, da se s povečevanjem vidnega polja prvi stolpec poveča s 100px na 200px. Druga dva, ki ju vladata enota fr, začnejo rasti šele potem, ko je prva dosegla največjo širino. To je logično, saj je cilj enote frakcij razdeliti razpoložljivi (preostali) prostor.

The min-content, max-vsebina, in samodejno ključne besede

Tam je tretje vrste vrednosti lahko dodelite minmax () funkcijo. The min-content, max-vsebina, in samodejno ključne besede se nanašajo na dimenzije mrežne proge na vsebino, ki jo vsebuje.

max-vsebina

The max-vsebina ključno besedo usmerja brskalnik, ki ga mora imeti stolpec omrežja najširši element, ki ga vsebuje.

Na spodnji predstavitvi sem postavil a 400-piksna slika znotraj prvega mrežnega toka in uporabil naslednje pravilo CSS (na koncu članka lahko najdete predstavitev Codepen s popolno spremenjeno kodo):

 .vsebnik grid-template-columns: max-content 1fr 1fr; / ** * Enako z zapisom minmax (): * grid-template-column: minmax (max-content, max-content) 1fr 1fr; * / 

Nisem uporabil minmax () notacija še ni, vendar lahko v komentarju o kodi zgoraj vidite, kako bo izgledala ista koda (čeprav je tu odveč).

Kot lahko vidite, je prvi stolpec mreže tako širok kot njegov najširši element (tukaj slika). Na ta način lahko uporabniki vedno vidijo sliko v polni velikosti. Vendar pa je ta postavitev pod določeno velikostjo pogleda se ne odziva.

min-content

The min-content ključno besedo usmerja brskalnik, da mora biti stolpec mreže tako širok kot najmanjši element, ki ga vsebuje, tako ne vodi do prelivanja.

Poglejmo, kako izgleda prejšnji demo s sliko, če spremenimo vrednost prvega stolpca v min-content:

 .vsebnik grid-template-columns: min-content 1fr 1fr; / ** * Enako z oznako minmax (): * grid-template-column: minmax (min-content, min-content) 1fr 1fr; * / 

Zeleno ozadje sem pustil pod sliko, tako da lahko vidite polno velikost prve celice mreže.

Kot lahko vidite, prvi stolpec ohrani najmanjšo širino mogoče doseči brez prelivanja. V tem primeru bo to definirano z minimalno širino 4. \ Tin 7. \ T oblazinjenje in velikost pisave lastnosti, kot je slika v prvi celici lahko zmanjša na nič brez prelivanja.

Če je celica mreže vsebovala besedilni niz, min-content bi bilo enaka širini najdaljše besede, saj je to najmanjši element, ki ga ni mogoče dodatno krčiti brez prelivanja. Tukaj je odličen članek BitsOfCode, kjer lahko vidite, kako min-content in max-vsebina se obnašajo, ko mrežna celica vsebuje besedilni niz.

Uporaba min-content in max-vsebina skupaj

Če bomo uporaba min-content in max-vsebina skupaj znotraj minmax () funkcija dobimo stolpec mreže, ki:

1. se odziva
2. nima prelivanja
3. ne raste širše od najširšega elementa

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

Lahko uporabimo tudi min-content in max-vsebina ključne besede skupaj z drugimi vrednostmi dolžine znotraj minmax () funkcijo, dokler pravilo nima smisla. Na primer, minmax (25%, max-content) ali minmax (min-content, 300px) veljajo oba veljavna pravila.

samodejno

Končno lahko uporabimo tudi samodejno ključno besedo kot argument minmax () funkcijo.

Kdaj samodejno je največji, njena vrednost je enaka max-vsebina.

Kdaj je uporabljajo kot minimum, njegova vrednost je določena z min-width / min-height pravilo, kar pomeni samodejno je včasih enaka min-content, ampak ni vedno.

V našem prejšnjem primeru, min-content ustreza samodejno, ker je minimalna širina prvega stolpca mreže vedno manjša od njegove minimalne višine. Torej, pripadajoče pravilo CSS:

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

lahko je tudi napisano tako:

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

The samodejno lahko tudi ključna beseda skupaj z drugimi statičnimi in dinamičnimi enotami (piksli, fr enota, odstotki itd.) znotraj minmax () funkcijo, na primer minmax (avto, 300 px) bi veljavno pravilo.

Lahko preverite, kako min-content, max-vsebina, in samodejno ključne besede delujejo z minmax () funkcijo v naslednji predstavitvi Codepen: