CSS tinklelio išdėstymas Kaip naudoti minmax ()
The CSS tinklelio išdėstymo modulis ima reaguoti į kitą lygį, įvesdami a naujo pobūdžio lankstumas tai niekada nebuvo matyta. Dabar mes negalime tik apibrėžti tinkintus tinklus blazingly tik su grynu CSS, bet CSS Grid taip pat turi daug paslėptų brangakmenių tai leidžia mums dar labiau patobulinti tinklelį ir pasiekti sudėtingus išdėstymus.
The minmax () funkcija yra viena iš šių mažiau žinomų funkcijų. Tai leidžia nustatyti tinklelio kelio dydį kaip minimalus maksimalus diapazonas taip, kad tinklelis galėtų geriausiai pritaikyti kiekvieno naudotojo peržiūros sritį.
Sintaksė
Sintaksė minmax () funkcija yra gana paprasta du argumentai: minimali ir maksimali vertė:
minmax (min., maks.)
The min vertė turi būti mažesnis negu maks, kitaip maks naršyklė ignoruoja.
Mes galime naudoti minmax () veikia kaip vertės tinklelio šablonai arba tinklelio šablonų eilutės turtas (arba abu). Mūsų pavyzdyje naudosime pirmąjį, nes tai yra daug dažniau naudojamas atvejis.
.konteineris ekranas: tinklelis; tinklelio šablonai: minmax (100px, 200px) 1fr 1fr; tinklelio šablonai: 100px 100px 100px; tinklelio tarpas: 10px;
Žemiau esančioje demonstracijoje „Codepen“ galite rasti HTML ir CSS kodai mes naudosime visame straipsnyje.
Galime naudoti skirtingų rūšių vertybes viduje minmax () priklauso nuo to, kokio tipo tinklelį norime sukurti.
Statinės ilgio vertės
Yra du pagrindiniai būdai, kaip mes galime naudoti minmax () funkcija statinės ilgio vertės.
Pirma, galime naudoti minmax () tik vienam tinklelio stulpeliui ir nustatykite kitų stulpelių plotį kaip paprastas statines reikšmes (taškai čia).
tinklelio šablonai: minmax (100px, 200px) 200px 200px;
Žemiau esančiame „gif“ demonstracijoje galite matyti, kad šis išdėstymas yra ne reaguoja, tačiau pirmoji skiltis yra šiek tiek lankstumo. Antrasis ir trečiasis stulpeliai išlaiko fiksuotą plotį (200 pikselių), o pirmasis stulpelis svyruoja nuo 100 iki 200 pikselių, remiantis turima erdve.
Antra, galime apibrėžti plotį daugiau nei viena stulpelis naudojant minmax (). Min ir max reikšmės yra statinės, todėl pagal nutylėjimą tinklelis yra ne reaguoja. Tačiau pačios stulpeliai yra lanksti, bet tik tarp 100 ir 200 pikselių. Jie augti ir susitraukti keisdami peržiūros srities dydį.
tinklelio šablonai: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px);
Atkreipkite dėmesį, kad mes taip pat galime naudoti pakartoti () funkcija su ja minmax (). Taigi, ankstesnis kodo fragmentas taip pat gali būti parašytas taip:
grid-template-columns: pakartoti (3, minmax (100px, 200px));
Dinaminės ilgio vertės
Be statinių verčių, minmax () funkcija taip pat priima procentiniais vienetais ir nauja frakcija (fr) kaip argumentai. Naudodami juos galime pasiekti individualius tinklus, kurie yra abu reaguoja ir pakeisti jų matmenis pagal turimą erdvę.
Toliau pateikiamas kodas sukuria tinklelį, kuriame yra pirmojo stulpelio plotis svyruoja nuo 50% iki 80% o antrasis ir trečiasis tolygiai paskirstykite likusią erdvę.
tinklelio šablonai: minmax (50%, 80%) 1fr 1fr;
Kai mes naudojame dinamines reikšmes minmax () funkcija, labai svarbu nustatyti a taisyklė, kuri yra prasminga. Leiskite jums parodyti pavyzdį, kur grotelės:
tinklelio šablonai: minmax (1fr, 2fr) 1fr 1fr;
Ši taisyklė neturi jokios prasmės, nes naršyklė yra negali nuspręsti kuri vertė priskiriama minmax () funkcija. Minimali vertė sukeltų a 1fr 1fr 1fr stulpelio plotis, o maksimalus 2fr 1fr 1fr. Tačiau abu galima net labai mažame ekrane. Yra niekas, su kuriuo naršyklė gali susieti.
Čia yra rezultatas:
Sujunkite statines ir dinamines reikšmes
Tai taip pat įmanoma sujungti statines ir dinamines vertes. Pavyzdžiui, pirmiau pateiktame „Codepen“ demonstracijoje naudoju minmax (100px, 200px) 1fr 1fr; taisyklė, dėl kurios atsiranda tinklelis, kuriame yra pirmasis stulpelis svyruoja tarp 100 ir 200 pikselių ir likusi erdvė tolygiai paskirstomos kitoms dviem.
tinklelio šablonai: minmax (100px, 200px) 1fr 1fr;
Įdomu pastebėti, kad, kai rodoma peržiūros sritis, pirma, pirmoji skiltis auga nuo 100 pikselių iki 200 pikselių. Kiti du, kuriuos valdo fr vienetas, pradeda augti tik po to, kai pirmasis pasiekė maksimalų plotį. Tai logiška, nes frakcijos vieneto tikslas yra padalinti turimą (likusią) erdvę.
The min. turinys, maksimalus turinys, ir automatinis raktiniai žodžiai
Ten yra trečioji vertė mes galime priskirti minmax () funkcija. The min. turinys, maksimalus turinys, ir automatinis raktiniai žodžiai susieti tinklelio kelio matmenis su turinio.
maksimalus turinys
The maksimalus turinys raktinis žodis nukreipia naršyklę, kurioje turi būti tinklelio stulpelis kuo platesnis elementas.
Žemiau pateiktoje demonstracijoje pateikiau a 400px vaizdas pirmajame tinklelio takelyje, ir naudojo šią CSS taisyklę („Codepen“ demonstraciją galite rasti su visu modifikuotu kodu straipsnio pabaigoje):
.konteineris grid-template-columns: maksimalus kiekis 1fr 1fr; / ** * Tas pats su minmax () žymėjimu: * grid-template-columns: minmax (maksimalus kiekis, maksimalus kiekis) 1fr 1fr; * /
Nenaudojau minmax () dar nepažymėta, bet kodo komentare galite matyti, kaip tas pats kodas atrodys su juo (nors tai yra nereikalinga).
Kaip matote, pirmasis tinklelio stulpelis yra toks platus kaip ir plačiausias elementas (čia vaizdas). Tokiu būdu vartotojai visada gali matyti vaizdą pilno dydžio. Tačiau pagal tam tikrą peržiūros srities dydį šis išdėstymas yra ne reaguoja.
min. turinys
The min. turinys raktinis žodis nukreipia naršyklę, kad tinklelio stulpelis turi būti toks platus kaip siauriausias elementas, tam tikru būdu nesukelia perpildymo.
Pažiūrėkime, kaip atrodo, kaip ankstesnis demo su vaizdu atrodo, jei pakeisime pirmojo stulpelio reikšmę į min. turinys:
.konteineris grid-template-columns: min. turinys 1fr 1fr; / ** * Tas pats su minmax () žymėjimu: * grid-template-columns: minmax (min. Turinys, min. Turinys) 1fr 1fr; * /
Aš palikau žalią foną žemiau vaizdo, kad galėtumėte matyti visą pirmos tinklelio langelio dydį.
Kaip matote, pirmame stulpelyje yra mažiausias plotis galima pasiekti be perpildymo. Šiame pavyzdyje tai bus apibrėžta minimaliu 4 ir 7 tinklelio ląstelių pločiu, kuris kyla iš paminkštinimas ir šrifto dydis savybės, kaip vaizdas pirmame ląstelėje gali būti sumažintas iki nulio be perpildymo.
Jei tinklelio langelyje yra teksto eilutė, min. turinys būtų lygus ilgiausio žodžio plotiui, tai yra mažiausias elementas, kurio negalima mažinti be perpildymo. Štai puikus BitsOfCode straipsnis, kuriame galite pamatyti, kaip min. turinys ir maksimalus turinys elgtis, kai tinklelio langelyje yra teksto eilutė.
Naudojimas min. turinys ir maksimalus turinys kartu
Jei mes naudoti min. turinys ir maksimalus turinys kartu viduje minmax () funkcija gauname tinklelio stulpelį, kuris:
- reaguoja
- neturi perpildymo
- nėra platesnis nei plačiausias elementas
.konteineris grid-template-columns: minmax (min. turinys, maksimalus kiekis) 1fr 1fr;
Taip pat galime naudoti min. turinys ir maksimalus turinys raktiniai žodžiai kartu su kitomis ilgio vertėmis viduje minmax () funkciją, kol taisyklė bus prasminga. Pavyzdžiui, minmax (25%, maksimalus turinys) arba minmax (min. turinys, 300 pikselių) būtų abi galiojančios taisyklės.
automatinis
Galiausiai, mes taip pat galime naudoti automatinis raktinis žodis kaip. \ t minmax () funkcija.
Kada automatinis yra naudojamas kaip maksimalus, jos vertė yra identiška maksimalus turinys.
Kai tai naudojamas kaip minimalus, jo vertę nurodo min. plotis / min. aukštis tai reiškia, kad automatinis kartais yra identiškas min. turinys, bet ne visada.
Mūsų ankstesniame pavyzdyje, min. turinys lygus automatinis, kadangi minimalus pirmojo tinklelio stulpelio plotis visada yra mažesnis už minimalų aukštį. Taigi, priklausanti CSS taisyklė:
.konteineris grid-template-columns: minmax (min. turinys, maksimalus kiekis) 1fr 1fr;
taip pat galėtų būti parašyta taip:
.konteineris grid-template-columns: minmax (auto, auto) 1fr 1fr;
The automatinis raktinis žodis taip pat gali būti naudojami kartu su kitais statiniais ir dinaminiais įrenginiais (pikseliais, fr vienetais, procentais ir tt) viduje minmax () funkciją minmax (automatinis, 300px) būtų tinkama taisyklė.
Galite patikrinti, kaip min. turinys, maksimalus turinys, ir automatinis raktiniai žodžiai veikia su minmax () funkcija „Codepen“ demo:
