CSS Grid Layout Slik bruker du minmax ()
De CSS Grid Layout Module tar responsiv design til neste nivå ved å introdusere en ny type fleksibilitet det ble aldri sett før. Nå kan vi ikke bare definer egendefinerte grensesnitt blazingly rask utelukkende med ren CSS, men CSS-nettet har også mange skjulte perler som tillater oss å videreutvikle nettverket og oppnå kompliserte oppsett.
De MinMax () funksjon er en av disse mindre kjente funksjoner. Det gjør det mulig å definere størrelsen på et rutenett som minimum til maksimal rekkevidde slik at rutenettet kan tilpasse seg visningen til hver bruker på best mulig måte.
syntax
Syntaxen til MinMax () funksjonen er relativt enkel, det tar to argumenter: et minimum og en maksimumsverdi:
minmax (min, maks)
De min verdi må være mindre enn max, ellers max blir ignorert av nettleseren.
Vi kan bruke MinMax () fungere som verdien av gitter-mal-kolonner eller gitter-mal-rader eiendom (eller begge deler). I vårt eksempel bruker vi førstnevnte, da det er et mye hyppigere brukstilfelle.
.container display: grid; rutenettmall-kolonner: minmax (100px, 200px) 1fr 1fr; rutenett-mal-rader: 100px 100px 100px; grid-gap: 10px;
I Codepen demo nedenfor finner du HTML og CSS kode Vi bruker hele artikkelen.
Vi kan bruke forskjellige typer verdier inne i MinMax () funksjon, alt avhenger av hva slags tilpasset rutenett vi vil opprette.
Statiske lengdeverdier
Det er to grunnleggende måter hvordan vi kan bruke MinMax () fungere med statiske lengdeverdier.
For det første kan vi bruke MinMax () bare for en grid kolonne og definer bredden på de andre kolonnene som enkle statiske verdier (piksler her).
grid-template-kolonner: minmax (100px, 200px) 200px 200px;
På gif demoen under, kan du se at dette oppsettet er ikke responsiv, men den første kolonnen har litt fleksibilitet. Den andre og tredje kolonnen beholder sin faste bredde (200px) mens den første kolonnen varierer fra 100px til 200px, basert på ledig plass.
For det andre kan vi definere bredden på mer enn en grid kolonne ved hjelp av MinMax (). Min og max verdiene er begge statiske, slik at nettverket er som standard ikke responsiv. Men kolonnene selv er fleksibel, men bare mellom 100px og 200px. De vokse og krympe samtidig som vi endrer visningsportstørrelsen.
rutenettmall-kolonner: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px);
Legg merke til at vi også kan bruke gjenta() funksjon togehter med MinMax (). Så, den forrige kodebiten kan også skrives slik:
grid-template-kolonner: gjenta (3, minmax (100px, 200px));
Dynamiske lengdeverdier
Bortsett fra statiske verdier, MinMax () funksjon aksepterer også prosentandel enheter og ny fraksjon (fr) enhet som argumenter. Ved å bruke dem kan vi oppnå egendefinerte grids som begge er mottakelig og endre deres dimensjoner i henhold til ledig plass.
Koden nedenfor resulterer i et rutenett der bredden på den første kolonnen varierer mellom 50% og 80% mens den andre og den tredje dele det resterende rommet jevnt.
rutenettmall-kolonner: minmax (50%, 80%) 1fr 1fr;
Når vi bruker dynamiske verdier med MinMax () funksjon, er det viktig å sette opp en regelen som er fornuftig. La meg vise deg et eksempel hvor rutenettet faller fra hverandre:
rutenettmall-kolonner: minmax (1fr, 2fr) 1fr 1fr;
Denne regelen gir ingen mening, som nettleseren er kan ikke bestemme seg hvilken verdi å tildele til MinMax () funksjon. Minimumsverdien vil føre til a 1fr 1fr 1fr kolonnebredde, mens maksimalt til 2fr 1fr 1fr. Men begge er mulige selv på en svært liten skjerm. Det er ingenting nettleseren kan forholde seg til.
Her er resultatet:
Kombiner statiske og dynamiske verdier
Det er også mulig å kombinere statiske og dynamiske verdier. For eksempel, i Codepen demo ovenfor brukte jeg minmax (100px, 200px) 1fr 1fr; regelen som resulterer i et rutenett der den første kolonnen varierer mellom 100px og 200px og gjenværende plass er jevnt fordelt mellom de to andre.
rutenettmall-kolonner: minmax (100px, 200px) 1fr 1fr;
Det er interessant å observere at når visningsporten vokser, blir den første kolonnen først fra 100px til 200px. De to andre, styrt av fr-enheten, begynner å vokse først etter at den første nådde sin maksimale bredde. Dette er logisk, ettersom målet med fraksjonenheten er å dele opp tilgjengelig (gjenværende) plass.
De min-innhold, max-innhold, og auto søkeord
Det er en tredje type verdi vi kan tildele til MinMax () funksjon. De min-innhold, max-innhold, og auto søkeord relaterer dimensjonene til et rutenett til innhold det inneholder.
max-innhold
De max-innhold søkeord styrer nettleseren som gridkolonnen må være så bredt som det bredeste elementet den inneholder.
På demoen under, plasserte jeg en 400px bredt bilde inne i det første rutenettet, og brukte følgende CSS-regel (du kan finne en Codepen-demo med den fulle endrede koden i slutten av artikkelen):
.beholder grid-template-kolonner: maksimalt innhold 1fr 1fr; / ** * Det samme med minmax () notat: * Grid-Template-kolonner: Minmax (maksimalt innhold, maksimalt innhold) 1fr 1fr; * /
Jeg har ikke brukt MinMax () notat ennå, men i kodekommentaren ovenfor kan du se hvordan samme kode ville se ut med den (selv om det er overflødig her).
Som du ser, er den første grid-kolonnen så bred som det bredeste elementet (her bildet). På denne måten kan brukerne alltid se bildet i full størrelse. Men under en vis viewportstørrelse er dette oppsettet ikke responsiv.
min-innhold
De min-innhold søkeord styrer nettleseren at gridkolonnen må være så bred som smaleste elementet den inneholder, på en måte som fører ikke til overløp.
La oss se hvordan forrige demo med bildet ser ut hvis vi endrer verdien av den første kolonnen til min-innhold:
.container grid-template-kolonner: min-innhold 1fr 1fr; / ** * Det samme med minmax () notat: * Rutenettmall-kolonner: minmax (min-innhold, min-innhold) 1fr 1fr; * /
Jeg forlot den grønne bakgrunnen under bildet slik at du kan se full størrelse på den første gridcellen.
Som du ser, beholder den første kolonnen den minste bredden som kan oppnås uten overløp. I dette eksemplet vil dette bli definert av den minimale bredden av fjerde og syvnettet, som stammer fra padding og skriftstørrelse egenskaper, som bildet i den første cellen kan krympes til null uten overløp.
Hvis gridcellen inneholdt en tekststreng, min-innhold ville vært lik bredden til det lengste ordet, som det er det minste elementet som ikke kan krympes ytterligere uten overløp. Her er en flott artikkel av BitsOfCode hvor du kan se hvordan min-innhold og max-innhold oppfør når gridcellen inneholder en tekststreng.
Ved hjelp av min-innhold og max-innhold sammen
Hvis vi bruk min-innhold og max-innhold sammen inne i MinMax () funksjon vi får en rutenett som:
- er lydhør
- har ingen overløp
- vokser ikke bredere enn sitt bredeste element
.container grid-template-kolonner: minmax (min-innhold, maksimalt innhold) 1fr 1fr;
Vi kan også bruke min-innhold og max-innhold søkeord sammen med andre lengdeverdier inne i MinMax () fungere, til regelen er fornuftig. For eksempel, minmax (25%, maksimalt innhold) eller minmax (min-innhold, 300px) ville være begge gyldige regler.
auto
Til slutt kan vi også bruke auto søkeord som et argument av MinMax () funksjon.
Når auto er brukes som maksimum, dens verdi er identisk med max-innhold.
Når det er brukes som et minimum, dens verdi er spesifisert av en minstebredde / min-høyden regelen, noe som betyr at auto er noen ganger identisk med min-innhold, men ikke alltid.
I vårt tidligere eksempel, min-innhold svarer til auto, som den minste bredden på den første gridkolonnen er alltid mindre enn den minste høyden. Så tilhørende CSS-regel:
.container grid-template-kolonner: minmax (min-innhold, maksimalt innhold) 1fr 1fr;
kan også skrives slik:
.container grid-template-kolonner: minmax (auto, auto) 1fr 1fr;
De auto søkeord kan også være brukes sammen med andre statiske og dynamiske enheter (piksler, fr enhet, prosenter, etc.) inne i MinMax () funksjon, for eksempel minmax (auto, 300px) ville være en gyldig regel.
Du kan teste hvordan min-innhold, max-innhold, og auto søkeord arbeid med MinMax () fungere i følgende Codepen demo:
