CSS Grid Layout Kuidas kasutada minmax ()
The CSS Grid Layout Module võtab vastusliku kujunduse järgmisele tasandile, tutvustades a uut tüüpi paindlikkust mida pole kunagi varem näinud. Nüüd ei saa me ainult defineerige kohandatud võrke kiirelt kiirelt ainult puhta CSS-iga, kuid ka CSS Grid'il palju peidetud kalliskive mis võimaldavad meil võrku veelgi keerukamaks muuta ja keerulisi paigutusi saavutada.
The minmax () funktsiooni on üks neist vähem tuntud tunnustest. See võimaldab määrata võrgu rööbastee suuruse miinimumini maksimaalsesse vahemikku nii, et võrk suudaks iga kasutaja vaatenurka kohandada parimal võimalikul viisil.
Süntaksi
Süntaks minmax () funktsioon on suhteliselt lihtne kaks argumenti: minimaalne ja maksimaalne väärtus:
minmax (min, max)
The min väärtus peab olema väiksem kui max, vastasel korral max brauser ignoreerib.
Me saame seda kasutada minmax () toimima väärtuse grid-malli-veerud või ruudustik-rida vara (või mõlemad). Meie näites kasutame esimest, kuna see on palju sagedamini kasutatav juhtum.
.konteiner kuva: võrk; grid-templ-kolonnid: minmax (100 px, 200 px) 1fr 1fr; grid-template-read: 100px 100px 100px; võrgupuudus: 10 px;
Allpool asuvas demodokumendis leiate selle HTML ja CSS kood me kasutame seda kogu artiklis.
Me saame kasutada erinevaid väärtusi sees minmax () kõik sõltub sellest, millist kohandatud võrku soovime luua.
Staatilise pikkuse väärtused
On kaks peamist viisi, kuidas seda kasutada minmax () funktsiooni staatilise pikkuse väärtused.
Esiteks saame kasutada minmax () ainult ühe võrgu veeru puhul ja määrake teiste veergude laius lihtsate staatiliste väärtustena (pikslid siin).
grid-template-columns: minmax (100 px, 200px) 200 px 200px;
Allpool toodud gif-demo näete, et see paigutus on ei reageeri, siiski on esimene veerg teatud paindlikkust. Teine ja kolmas veerg säilitavad oma fikseeritud laiuse (200 px), samal ajal kui esimene veerg ulatub 100tx kuni 200 pikslit, olemasoleva ruumi põhjal.
Teiseks saame määratleda laiuse rohkem kui üks võrgu veerg kasutades minmax (). Min ja max väärtused on nii staatilised, nii et vaikimisi on võrk ei reageeri. Kuid veerud ise on paindlik, kuid ainult vahemikus 100 ja 200 pikslit. Nad kasvavad ja kahanevad samaaegselt vaatepordi suuruse muutmisel.
grid-templ-kolonnid: minmax (100 px, 200 px) minmax (100 px, 200 px) minmax (100 px, 200 px);
Pange tähele, et saame ka kasuta korrake () funktsiooni koos minmax (). Seega võib eelmise koodilõigu kirjutada ka nii:
grid-template-columns: korrake (3, minmax (100px, 200px));
Dünaamilised pikkuse väärtused
Lisaks staatilistele väärtustele on minmax () funktsiooni aktsepteerib ka protsentides ja uus fraktsioon (fr) argumentidena. Kasutades neid, saame saavutada kohandatud võrke, mis on mõlemad tundlik ja muuta nende mõõtmeid vastavalt olemasolevale ruumile.
Alltoodud kood annab tulemuseks võrgu, kus esimese veeru laius vahemikus 50% kuni 80% teine ja kolmas jagada ülejäänud ruumi ühtlaselt.
grid-templ-kolonnid: minmax (50%, 80%) 1fr 1fr;
Kui kasutame dünaamilisi väärtusi minmax () funktsioon, on oluline luua a reegel, mis on mõistlik. Lubage mul näidata teile näidet, kus võrk laguneb:
grid-malli-kolonnid: minmax (1fr, 2fr) 1fr 1fr;
See reegel ei ole mõtet, kuna brauser on ei suuda otsustada millisele väärtusele määrata minmax () funktsiooni. Minimaalne väärtus tooks kaasa a 1fr 1fr 1fr veeru laius, samas kui maksimaalne 2fr 1fr 1fr. Kuid mõlemad on võimalikud isegi väga väikestel ekraanidel. Seal on midagi, mida brauser ei saa.
Siin on tulemus:
Ühendage staatilised ja dünaamilised väärtused
Samuti on võimalik ühendada staatilised ja dünaamilised väärtused. Näiteks kasutasin eespool kirjeldatud Codepeni demos minmax (100 px, 200 px) 1fr 1fr; reegel, mille tulemuseks on võrk, kus esimene veerg vahemikus 100 px kuni 200 px ja ülejäänud ruum on kahe teise vahel.
grid-templ-kolonnid: minmax (100 px, 200 px) 1fr 1fr;
On huvitav märkida, et kui vaateava kasvab, kasvab kõigepealt esimene veerg 100 px-lt 200-le. Ülejäänud kaks, mida juhivad fr üksus, hakkavad kasvama alles pärast esimese maksimaalse laiuse saavutamist. See on loogiline, sest murdosaüksuse eesmärk on jagada olemasolev (ülejäänud) ruum.
The min-sisu, maksimaalne sisu, ja automaatne märksõnad
Seal on kolmas väärtus me saame määrata minmax () funktsiooni. The min-sisu, maksimaalne sisu, ja automaatne märksõnad seostavad võrguraja mõõtmeid sisu.
maksimaalne sisu
The maksimaalne sisu märksõna juhib brauserit, mis peab olema veerus nii lai kui kõige laiem element.
Allpool olevas demos paigutasin a 400px pilti esimese võrguraja sees ja kasutas järgmist CSS reeglit (võite leida Codepeni demo koos täieliku muudetud koodiga artikli lõpus):
.konteiner grid-template-columns: max-sisu 1fr 1fr; / ** * sama ka minmax () märkega: * grid-template-columns: minmax (max-sisu, max-sisaldus) 1fr 1fr; * /
Ma pole seda kasutanud minmax () märkus on veel olemas, kuid ülaltoodud kood kommentaaris näete, kuidas sama kood seda välja näeb (kuigi see on siin üleliigne).
Nagu näete, on esimene võrgu veerg sama lai kui selle laiem element (siin pilt). Nii saavad kasutajad alati pilti näha täissuuruses. Teatud vaatepordi suuruses on see paigutus siiski ei reageeri.
min-sisu
The min-sisu märksõna suunab brauseri, et võrgu veerg peab olema sama lai kitsam element, sellisel viisil ei too kaasa ülevoolu.
Vaatame, kuidas eelmise demoga koos pildiga näeb välja, kui muudame esimese veeru väärtust väärtusega min-sisu:
.konteiner grid-template-columns: min-sisaldus 1fr 1fr; / ** * Sama kehtib ka minmax () märkega: * grid-template-columns: minmax (min-sisu, min-sisaldus) 1fr 1fr; * /
Ma jätsin rohelise tausta alt pildi all, nii et näete esimese võrguraku täissuurust.
Nagu näete, säilitab esimene veerg väikseima laiuse saab saavutada ilma ülevooluta. Selles näites määratletakse see neljanda ja seitsmenda võrguraku minimaalse laiusega, mis tuleneb polsterdus ja kirjasuurus omadused nagu esimeses lahtris olev pilt võiks olla nullini ilma ülevooluta.
Kui ruudustik sisaldab tekstistringi, min-sisu oleks võrdub pikima sõna laiusega, see on väikseim element, mida ei saa edasi liigutada ilma ülevooluta. Siin on suurepärane BitsOfCode'i artikkel, kus saate näha, kuidas min-sisu ja maksimaalne sisu käituda, kui võrguribal on tekstijoon.
Kasutamine min-sisu ja maksimaalne sisu koos
Kui me kasutada min-sisu ja maksimaalne sisu koos sees minmax () funktsiooni saame võrgu veeru, mis:
- on tundlik
- ei ole ülevoolu
- ei kasva laiemalt kui selle kõige laiem element
.konteiner grid-template-columns: minmax (min-sisaldus, max-sisaldus) 1fr 1fr;
Saame kasutada ka min-sisu ja maksimaalne sisu märksõnad koos teiste pikkuste väärtustega sees minmax () funktsiooni, kuni reegel on mõistlik. Näiteks, minmax (25%, maksimaalne sisu) või minmax (min-sisu, 300 pikslit) mõlemad kehtivad reeglid.
automaatne
Lõpuks saame kasutada ka automaatne märksõna argumendina minmax () funktsiooni.
Millal automaatne on kasutatakse maksimaalselt, selle väärtus on identne maksimaalne sisu.
Kui see on kasutatakse minimaalselt, selle väärtuse määrab min-laius / min-kõrgus reegel, mis tähendab seda automaatne on mõnikord identne min-sisu, aga mitte alati.
Meie eelmises näites, min-sisu võrdub automaatne, esimese ruudukujulise veeru minimaalne laius on alati väiksem kui minimaalne kõrgus. Seega kuulub CSS-i reegel:
.konteiner grid-template-columns: minmax (min-sisaldus, max-sisaldus) 1fr 1fr;
võidakse kirjutada ka nii:
.konteiner grid-template-columns: minmax (auto, auto) 1fr 1fr;
The automaatne märksõna võib olla ka kasutatakse koos teiste staatiliste ja dünaamiliste üksustega (pikslid, fr ühik, protsendid jne) minmax () funktsiooni minmax (automaatne, 300tk) oleks kehtiv reegel.
Saate testida, kuidas min-sisu, maksimaalne sisu, ja automaatne märksõnad töötavad koos minmax () funktsiooni järgmine Codepeni demo:
