CSS Grid Layout Sådan bruges minmax ()

Det CSS Grid Layout Module tager responsivt design til næste niveau ved at introducere a ny form for fleksibilitet det blev aldrig set før. Nu kan vi ikke kun definér brugerdefinerede net lynrask hurtigt alene med rent CSS, men CSS-nettet har også mange skjulte perler Det giver os mulighed for yderligere at tilpasse nettet og opnå komplicerede layouter.

Det MinMax () fungere er en af ​​disse mindre kendte funktioner. Det gør det muligt at definere størrelsen på et gitterspor som minimum til maksimal rækkevidde således at gitteret kan tilpasse sig hver brugers visningsport på den bedst mulige måde.

Syntaks

Syntikken af MinMax () Funktionen er forholdsvis enkel, det tager to argumenter: et minimum og en maksimumsværdi:

 minmax (min, maks) 

Det min værdi skal være mindre end det max, Ellers max bliver ignoreret af browseren.

Vi kan bruge MinMax () fungere som værdi af grid-skabelon-søjler eller grid-template-rækker ejendom (eller begge). I vores eksempel bruger vi førstnævnte, da det er en meget hyppigere brugs sag.

 .container display: gitter; gitter-skabelon-søjler: minmax (100px, 200px) 1fr 1fr; Gitter-skabelon-rækker: 100px 100px 100px; Gittergap: 10px;  

I Codepen demo nedenfor kan du finde HTML og CSS kode Vi bruger hele artiklen.

Vi kan bruge forskellige slags værdier inde i MinMax () funktion afhænger alt af, hvilken slags brugergitter vi ønsker at oprette.

Statiske længdeværdier

Der er to grundlæggende måder, hvordan vi kan bruge MinMax () funktion med statiske længdeværdier.

For det første kan vi bruge MinMax () kun for en gittersøjle og definer bredden af ​​de andre kolonner som simple statiske værdier (pixels her).

 Gitter-skabelon-søjler: minmax (100px, 200px) 200px 200px; 

På gif demoen nedenfor kan du se, at dette layout er ikke lydhør, men den første kolonne har lidt fleksibilitet. Den anden og tredje kolonne bevarer deres faste bredde (200px), mens den første søjle spænder fra 100px til 200px, baseret på ledig plads.

For det andet kan vi definere bredden af mere end en gittersøjle ved brug af MinMax (). Min og max værdierne er begge statiske, så som standard er netværket ikke lydhør. Men kolonnerne selv er fleksibel, men kun mellem 100px og 200px. De vokse og krympe samtidigt som vi ændrer visningsportstørrelsen.

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

Bemærk at vi også kan brug gentage() fungere hænger sammen med MinMax (). Så den tidligere kodestykke kan også skrives som denne:

 Gitter-skabelon-kolonner: Gentag (3, minmax (100px, 200px)); 

Dynamiske længdeværdier

Bortset fra statiske værdier, MinMax () funktion accepterer også procentdel enheder og ny fraktion (fr) enhed som argumenter. Ved at bruge dem kan vi opnå tilpassede net, der begge er lydhør og ændre deres dimensioner i henhold til ledig plads.

Koden nedenfor resulterer i et gitter, hvori bredden af ​​den første kolonne ligger mellem 50% og 80% mens den anden og den tredje Del det resterende rum jævnt.

 gitter-skabelon-søjler: minmax (50%, 80%) 1fr 1fr; 

Når vi bruger dynamiske værdier med MinMax () funktion, er det afgørende at oprette en reglen er fornuftigt. Lad mig vise dig et eksempel hvor gitter falder fra hinanden:

 gitter-skabelon-søjler: minmax (1fr, 2fr) 1fr 1fr; 

Denne regel giver ingen mening, som browseren er ude af stand til at beslutte hvilken værdi at tildele til MinMax () fungere. Minimumsværdien ville føre til a 1fr 1fr 1fr kolonne bredde, mens maksimum til 2fr 1fr 1fr. Men begge er mulige selv på en meget lille skærm. Der er Intet, som browseren kan forholde sig til.

Her er resultatet:

Kombiner statiske og dynamiske værdier

Det er også muligt at kombinere statiske og dynamiske værdier. For eksempel i Codepen demo ovenfor brugte jeg minmax (100px, 200px) 1fr 1fr; regel der resulterer i et gitter, hvor den første kolonne ligger mellem 100px og 200px og det resterende rum er fordelt jævnt mellem de to andre.

 gitter-skabelon-søjler: minmax (100px, 200px) 1fr 1fr; 

Det er interessant at bemærke, at når visningsporten vokser, bliver den første kolonne først fra 100px til 200px. De to andre, styret af fr-enheden, begynder at vokse først efter at den første nåede sin maksimale bredde. Dette er logisk, da fraktionsenhedens mål er at opdele det tilgængelige (resterende) rum.

Det min-indhold, max-indhold, og auto søgeord

Der er en tredje slags værdi vi kan tildele til MinMax () fungere. Det min-indhold, max-indhold, og auto søgeord vedrører dimensioner af et gitterspor til indhold det indeholder.

max-indhold

Det max-indhold søgeord leder browseren, som gridkolonnen skal være så bredt som det bredeste element, det indeholder.

På demoen nedenfor lagde jeg en 400px bredt billede inde i det første gitterspor og brugt følgende CSS-regel (du kan finde en Codepen-demo med den fulde ændrede kode i slutningen af ​​artiklen):

 .container gitter-skabelon-kolonner: maks. indhold 1fr 1fr; / ** * Det samme med minmax () notationen: * Gitter-skabelon-søjler: minmax (maks. Indhold, maks. Indhold) 1fr 1fr; * / 

Jeg har ikke brugt MinMax () notation endnu, men i kode kommentaren ovenfor kan du se, hvordan den samme kode ville se ud med den (selv om det er overflødigt her).

Som du kan se, er den første gittersøjle så bred som dens bredeste element (her billedet). På denne måde kan brugerne altid se billedet i fuld størrelse. Under en vis viewportstørrelse er dette layout imidlertid ikke lydhør.

min-indhold

Det min-indhold søgeord leder browseren, at gittersøjlen skal være så bred som smaleste element, det indeholder, på en måde som fører ikke til overløb.

Lad os se, hvordan den tidligere demo med billedet ser ud, hvis vi ændrer værdien af ​​den første kolonne til min-indhold:

 .container gitter-skabelon-kolonner: min-indhold 1fr 1fr; / ** * Det samme med minmax () notationen: * Gitter-skabelon-søjler: minmax (min-indhold, min-indhold) 1fr 1fr; * / 

Jeg forlod den grønne baggrund under billedet, så du kan se den fulde størrelse af den første gittercelle.

Som du kan se, bevarer den første kolonne den mindste bredde kan opnås uden overløb. I dette eksempel vil dette blive defineret af den minimale bredde af den fjerde og syvende gitterceller, der stammer fra polstring og skriftstørrelse egenskaber, som billedet i den første celle kunne blive krympet til nul uden overløb.

Hvis gittercellen indeholdt en tekststreng, min-indhold ville være svarende til bredden af ​​det længste ord, da det er det mindste element, der ikke kan krympes yderligere uden overløb. Her er en god artikel af BitsOfCode, hvor du kan se hvordan min-indhold og max-indhold opfører sig, når gittercellen indeholder en tekststreng.

Ved brug af min-indhold og max-indhold sammen

Hvis vi brug min-indhold og max-indhold sammen inde i MinMax () funktion vi får en gittersøjle der:

1. er lydhør
2. har ingen overløb
3. vokser ikke bredere end sit bredeste element

 .container gitter-skabelon-kolonner: minmax (min-indhold, maksimalt indhold) 1fr 1fr;  

Vi kan også bruge min-indhold og max-indhold søgeord sammen med andre længdeværdier inde i MinMax () funktion, indtil reglen giver mening. For eksempel, minmax (25%, maksimalt indhold) eller minmax (min-indhold, 300px) ville være begge gyldige regler.

auto

Endelig kan vi også bruge auto søgeord som et argument af MinMax () fungere.

Hvornår auto er brugt som maksimum, dens værdi er identisk med max-indhold.

Når det er bruges som et minimum, dens værdi er angivet af min-bredde / min-højde regel, hvilket betyder at auto er undertiden identisk med min-indhold, men ikke altid.

I vores tidligere eksempel, min-indhold svarer til auto, da den minimale bredde af den første gittersøjle altid er mindre end dens minimale højde. Så den tilhørende CSS regel:

 .container gitter-skabelon-kolonner: minmax (min-indhold, maksimalt indhold) 1fr 1fr;  

kan også skrives som dette:

 .container gitter-skabelon-kolonner: minmax (auto, auto) 1fr 1fr;  

Det auto Søgeord kan også være bruges sammen med andre statiske og dynamiske enheder (pixels, fr-enhed, procentsatser osv.) inde i MinMax () funktion, for eksempel minmax (auto, 300px) ville være en gyldig regel.

Du kan teste hvordan min-indhold, max-indhold, og auto søgeord arbejde med MinMax () funktion i følgende Codepen demo: