CSS režģa izkārtojums Kā lietot minmax ()
The CSS režģa izkārtojuma modulis ievieš atsaucīgu dizainu uz nākamo līmeni, ieviešot a jauna veida elastība kas vēl nekad nav bijis redzams. Tagad mēs nevaram tikai definēt pielāgotus tīklus blazingly ātri tikai ar tīru CSS, bet CSS Grid arī ir daudzi slēptās dārgakmeņi kas ļauj mums vēl vairāk izmainīt režģi un sasniegt sarežģītus izkārtojumus.
The minmax () funkciju ir viena no šīm retāk pazīstamajām iezīmēm. Tas ļauj noteikt tīkla sliežu ceļa lielumu minimālais līdz maksimālajam diapazonam tā, lai režģis varētu vislabāk pielāgot katra lietotāja skatījumu.
Sintakse
Sintakse minmax () funkcija ir samērā vienkārša divi argumenti: minimālā un maksimālā vērtība:
minmax (min, max)
The min vērtību jābūt mazākam nekā maks, pretējā gadījumā maks pārlūkprogramma ignorē.
Mēs varam izmantot minmax () darbojas kā vērtība režģa-veidnes kolonnas vai režģa-veidnes rindas īpašums (vai abi). Mūsu piemērā mēs izmantosim pirmo, jo tas ir daudz biežāks lietošanas gadījums.
.konteiners displejs: režģis; grid-template-columns: minmax (100px, 200px) 1fr 1fr; režģa-veidnes rindas: 100px 100px 100px; režģa sprauga: 10px;
Tālāk redzamajā demonstrācijā "Codepen" jūs varat atrast HTML un CSS kods mēs izmantosim visu rakstu.
Mēs varam izmantot dažādas vērtības iekšpusē minmax () funkcija ir atkarīga no tā, kāda veida pasūtījuma režģis mēs vēlamies izveidot.
Statiskās garuma vērtības
Ir divi galvenie veidi, kā mēs varam izmantot minmax () darbojas ar statiskās garuma vērtības.
Pirmkārt, mēs varam izmantot minmax () tikai par vienu kolonnu un definējiet citu kolonnu platumu kā vienkāršas statiskas vērtības (pikseļi šeit).
grid-template-columns: minmax (100px, 200px) 200px 200px;
Tālāk redzamajā gif demonstrācijā var redzēt, ka šis izkārtojums ir nav atsaucīgi, tomēr pirmajā slejā ir zināmu elastību. Otrā un trešā sleja saglabā fiksēto platumu (200px), bet pirmā sleja ir no 100 līdz 200 piks., pamatojoties uz pieejamo telpu.
Otrkārt, mēs varam noteikt platumu vairāk nekā viena tīkla kolonna izmantojot minmax (). Min un max vērtības ir gan statiskas, tāpēc pēc noklusējuma režģis ir nav atsaucīgi. Tomēr pašas kolonnas ir elastīga, bet tikai starp 100 un 200 piks. Viņi augt un sarukt vienlaicīgi mainot skata loga lielumu.
grid-template-columns: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px);
Ņemiet vērā, ka mēs varam arī izmantot atkārtot () funkciju ar to minmax (). Līdz ar to iepriekšējo koda fragmentu var rakstīt arī šādi:
grid-template-columns: atkārtot (3, minmax (100px, 200px));
Dinamiskās garuma vērtības
Papildus statiskajām vērtībām minmax () funkcija arī pieņem procentu vienības un jauna frakcija (fr) kā argumenti. Izmantojot tos, mēs varam sasniegt pielāgotus tīklus, kas abi ir atsaucīgi un mainīt to izmērus atkarībā no pieejamās vietas.
Turpmāk norādītais kods rada režģi, kurā atrodas pirmās kolonnas platums svārstās no 50% līdz 80% otrais un trešais vienmērīgi sadalīt atlikušo vietu.
režģa-veidnes kolonnas: minmax (50%, 80%) 1fr 1fr;
Kad mēs izmantojam dinamiskās vērtības ar minmax () funkcija, ir svarīgi izveidot a noteikums, kam ir jēga. Ļaujiet man jums parādīt piemēru, kur režģis sadalās:
grid-template-columns: minmax (1fr, 2fr) 1fr 1fr;
Šim noteikumam nav nekādas jēgas, jo pārlūks ir nevar izlemt kuru vērtību piešķirt minmax () funkciju. Minimālā vērtība novestu pie a 1fr 1fr 1fr kolonnas platums, bet maksimālais 2fr 1fr 1fr. Bet abi ir iespējami pat ļoti mazā ekrānā. Tur ir nekas, uz kuru pārlūks var attiekties.
Šeit ir rezultāts:
Apvienojiet statiskās un dinamiskās vērtības
Tas ir iespējams arī apvienot statiskās un dinamiskās vērtības. Piemēram, iepriekš minētajā Codepen demonstrācijā es izmantoju minmax (100px, 200px) 1fr 1fr; noteikums, kura rezultāts ir režģis, kurā ir pirmā sleja svārstās no 100 līdz 200px un atlikušā vieta ir pārējiem diviem.
grid-template-columns: minmax (100px, 200px) 1fr 1fr;
Ir interesanti ievērot, ka, palielinoties skata logam, pirmkārt, pirmā sleja aug no 100 pikss uz 200 piks. Pārējie divi, kurus pārvalda fr vienība, sāk augt tikai pēc tam, kad pirmais sasniedza maksimālo platumu. Tas ir loģiski, jo frakcijas vienības mērķis ir sadalīt pieejamo (atlikušo) telpu.
The min-saturs, maksimālais saturs, un auto atslēgvārdi
Tur ir trešā veida vērtība mēs varam piešķirt minmax () funkciju. The min-saturs, maksimālais saturs, un auto atslēgvārdi attiecas uz režģa ceļa izmēriem saturu.
maksimālais saturs
The maksimālais saturs atslēgvārdu vada pārlūkprogrammu, kurai jābūt tīkla kolonnai tikpat plašs kā plašākais elements.
Tālāk redzamajā demonstrācijā es ievietoju 400 pikseļu attēls pirmā tīkla trases iekšpusē un izmantoja šādu CSS noteikumu (jūs varat atrast Codepen demo ar pilnu modificēto kodu raksta beigās):
.konteiners grid-template-columns: maksimālais saturs 1fr 1fr; / ** * Tas pats ar minmax () apzīmējumu: * režģa-veidnes kolonnas: minmax (maksimālais saturs, maksimālais saturs) 1fr 1fr; * /
Es neesmu izmantojis minmax () notācija vēl ir, bet koda komentārā varat redzēt, kā tas pats kods izskatīsies ar to (lai gan šeit tas ir lieks).
Kā redzat, pirmā režģa kolonna ir tikpat plaša kā plašākais elements (šeit attēls). Tādā veidā lietotāji vienmēr var redzēt attēlu pilna izmēra. Tomēr, saskaņā ar noteiktu skata loga izmēru, šis izkārtojums ir nav atsaucīgi.
min-saturs
The min-saturs atslēgvārdu vada pārlūkprogrammu, ka režģa kolonnai ir jābūt tik plašai kā šaurākais elements, tādā veidā neizraisa pārplūdi.
Redzēsim, kā izskatās iepriekšējā demonstrācija ar attēlu, ja mainām pirmās kolonnas vērtību uz min-saturs:
.konteiners grid-template-columns: min-saturs 1fr 1fr; / ** * Tas pats ar minmax () apzīmējumu: * režģa-veidnes kolonnas: minmax (min-saturs, min-saturs) 1fr 1fr; * /
Es atstāju zaļo fonu zem attēla, lai jūs varētu redzēt pirmo režģa šūnas pilnu izmēru.
Kā redzat, pirmā sleja saglabā mazāko platumu var sasniegt bez pārplūdes. Šajā piemērā to noteiks 4. un 7. režģa šūnu minimālais platums, kas izriet no polsterējums un fonta izmērs īpašībām, kā attēls pirmajā šūnā varētu samazināties līdz nullei bez pārplūdes.
Ja režģa šūnā ir teksta virkne, min-saturs būtu vienāds ar garākā vārda platumu, kā tas ir mazākais elements, ko nevar turpināt sarukt bez pārplūdes. Šeit ir lielisks BitsOfCode raksts, kurā var redzēt, kā min-saturs un maksimālais saturs rīkoties, ja režģa šūnā ir teksta virkne.
Lietošana min-saturs un maksimālais saturs kopā
Ja mēs izmantot min-saturs un maksimālais saturs kopā iekšpusē minmax () funkcija, mēs saņemam režģa kolonnu, kas:
- ir atsaucīga
- nav pārplūdes
- nav plašāks par tā plašāko elementu
.konteiners grid-template-columns: minmax (min-saturs, max saturs) 1fr 1fr;
Mēs varam izmantot arī min-saturs un maksimālais saturs atslēgvārdi kopā ar citām garuma vērtībām iekšpusē minmax () funkciju, līdz noteikumam ir jēga. Piemēram, minmax (25%, maksimālais saturs) vai minmax (min-saturs, 300px) būtu gan derīgi noteikumi.
auto
Visbeidzot, mēs varam izmantot arī auto atslēgvārdu kā argumentu minmax () funkciju.
Kad auto ir izmanto maksimāli, tā vērtība ir identiska maksimālais saturs.
Kad tas ir izmanto vismaz, tās vērtību nosaka min-platums / min-augstums tas nozīmē, ka auto dažreiz ir identisks min-saturs, bet ne vienmēr.
Mūsu iepriekšējā piemērā, min-saturs tas ir vienāds ar auto, kā minimālais pirmā režģa kolonnas platums vienmēr ir mazāks par minimālo augstumu. Tātad piederīgais CSS noteikums:
.konteiners grid-template-columns: minmax (min-saturs, max saturs) 1fr 1fr;
varētu būt rakstīts arī šādi:
.konteiners grid-template-columns: minmax (auto, auto) 1fr 1fr;
The auto atslēgvārds var būt arī izmanto kopā ar citām statiskām un dinamiskām vienībām (pikseļi, fr vienība, procenti utt.) iekšpusē minmax () funkciju minmax (auto, 300px) būtu derīgs noteikums.
Jūs varat pārbaudīt, kā min-saturs, maksimālais saturs, un auto atslēgvārdi darbojas ar minmax () darbojas šādā Codepen demonstrācijā:
