CSS Grid Layout Kuinka käyttää minmax ()

CSS Grid Layout Module ottaa vastaavan suunnittelun seuraavalle tasolle ottamalla käyttöön a uudenlaista joustavuutta se ei ollut koskaan aiemmin nähty. Nyt emme voi vain määritellä mukautettuja verkkoja pelkästään nopea pelkästään puhtaalla CSS: llä, mutta CSS Gridillä on myös monet piilotetut jalokivet että voimme edelleen säätää verkkoa ja saavuttaa monimutkaisia ​​asetteluja.

MinMax () toimia on yksi näistä vähemmän tunnetuista ominaisuuksista. Sen avulla voidaan määrittää ristikkoradan koko vähintään maksimialueelle niin, että ruudukko voi mukautua kunkin käyttäjän näkymänäkymään parhaalla mahdollisella tavalla.

Syntaksi

Syntaksi MinMax () toiminto on suhteellisen yksinkertainen kaksi väitettä: vähimmäis- ja enimmäisarvo:

 minmax (min, max) 

min arvo on oltava pienempi kuin max, muuten max selain ei huomioi sitä.

Voimme käyttää MinMax () toimivat arvo grid-template-pylväät tai grid-template-rivinen omaisuus (tai molemmat). Esimerkissämme käytämme edellistä, koska se on paljon useammin käytetty tapaus.

 .kontti näyttö: ruudukko; grid-template-columns: minmax (100px, 200px) 1fr 1fr; ruudukko-rivit: 100px 100px 100px; ruudukko: 10px;  

Alla olevassa Codepen-demossa voit löytää HTML- ja CSS-koodi käytämme koko artikkelia.

Voimme käyttää erilaisia ​​arvoja sisällä MinMax () kaikki riippuu siitä, millaista mukautettua ruudukkoa haluat luoda.

Staattisen pituuden arvot

On olemassa kaksi tapaa, joilla voimme käyttää MinMax () toiminto staattisen pituuden arvot.

Ensinnäkin voimme käyttää MinMax () vain yhdelle ruudukolle ja määrittele muiden sarakkeiden leveys yksinkertaisina staattisina arvoina (pikselit täällä).

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

Alla olevassa gif-demossa näet, että tämä ulkoasu on ei reagoi, kuitenkin ensimmäinen sarake on jonkin verran joustavuutta. Toisessa ja kolmannessa sarakkeessa säilytetään kiinteä leveys (200 px), kun ensimmäinen sarake vaihtelee 100 px: stä 200px: iin, käytettävissä olevan tilan perusteella.

Toiseksi voimme määritellä leveyden useampi kuin yksi ruudukon sarake käyttämällä MinMax (). Min- ja max-arvot ovat sekä staattisia, joten oletusarvoisesti verkko on ei reagoi. Omat sarakkeet ovat kuitenkin joustava, mutta vain välillä 100px ja 200px. Ne kasvaa ja kutistuu samanaikaisesti kun muutamme näkymän kokoa.

 grid-templaattikolonnit: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

Huomaa, että voimme myös Käytä toistaa() toimia käydä MinMax (). Niinpä edellinen koodinpätkä voidaan kirjoittaa myös seuraavasti:

 grid-template-columns: toista (3, minmax (100px, 200px)); 

Dynaamiset pituuden arvot

Staattisten arvojen lisäksi MinMax () toiminto hyväksyy myös prosenttiyksikköä ja uusi fraktioyksikkö (fr) väitteinä. Käyttämällä niitä voimme saavuttaa mukautettuja verkkoja, jotka ovat molemmat herkkä ja muuttaa niiden mittoja käytettävissä olevan tilan mukaan.

Alla oleva koodi johtaa verkkoon, jossa ensimmäisen sarakkeen leveys vaihtelee välillä 50% ja 80% kun taas toinen ja kolmas jaa jäljellä oleva tila tasaisesti.

 grid-templ-kolonnit: minmax (50%, 80%) 1fr 1fr; 

Kun käytämme dynaamisia arvoja MinMax () toiminto, on tärkeää asentaa a sääntö, joka on järkevää. Haluan näyttää sinulle esimerkin, jossa ruudukko hajoaa:

 grid-template-columns: minmax (1fr, 2fr) 1fr 1fr; 

Tämä sääntö ei ole järkevää, koska selain on ei voi päättää mikä arvo on osoitettava MinMax () toimia. Vähimmäisarvo johtaisi a 1fr 1fr 1fr sarakkeen leveys, kun taas suurin 2fr 1fr 1fr. Mutta molemmat ovat mahdollisia jopa hyvin pienellä näytöllä. Siellä on mikään selain ei voi koskea.

Tässä on tulos:

Yhdistä staattiset ja dynaamiset arvot

Se on myös mahdollista yhdistää staattiset ja dynaamiset arvot. Esimerkiksi yllä olevassa Codepen-demossa käytin minmax (100px, 200px) 1fr 1fr; sääntö, joka johtaa verkkoon, jossa ensimmäinen sarake vaihtelee välillä 100px ja 200px ja jäljellä oleva tila on kahden muun kesken.

 grid-template-columns: minmax (100px, 200px) 1fr 1fr; 

On mielenkiintoista huomata, että koska katseluportti kasvaa, ensimmäinen sarake kasvaa 100 px: stä 200px: iin. Kaksi muuta, joita hallitsee fr-yksikkö, alkavat kasvaa vasta sen jälkeen, kun ensimmäinen saavutti maksimileveyden. Tämä on loogista, koska murtoyksikön tavoitteena on jakaa käytettävissä oleva (jäljellä oleva) tila.

min-pitoisuus, max-sisältöä, ja auto avainsanat

Siellä kolmas arvo voimme määrittää MinMax () toimia. min-pitoisuus, max-sisältöä, ja auto avainsanat liittyvät ruudukon raidan mittoihin sisältöä.

max-sisältöä

max-sisältöä avainsana ohjaa selaimen, jonka ruudukon sarakkeen on oltava niin laaja kuin laajin elementti.

Alla olevassa demossa asetin a 400px-kokoinen kuva ensimmäisen ruudukon sisällä ja käytti seuraavaa CSS-sääntöä (löydät Codepen-demon, jossa on koko muokattu koodi artikkelin lopussa):

 .kontti grid-template-columns: max-sisältö 1fr 1fr; / ** * sama minmax () -merkinnällä: * ruudukon malli-sarakkeet: minmax (max-sisältö, max-sisältö) 1fr 1fr; * / 

En ole käyttänyt MinMax () notation vielä, mutta yllä olevassa koodikommentissa näet, miten sama koodi näyttäisi siltä (vaikka se on tarpeeton tässä).

Kuten näette, ensimmäinen ruudukko on yhtä laaja kuin sen laajin elementti (tässä kuva). Näin käyttäjät voivat aina nähdä kuvan täysikokoisena. Tietyn näkymän kokoisen koon mukaan tämä asettelu on kuitenkin ei reagoi.

min-pitoisuus

min-pitoisuus avainsana ohjaa selaimen, että ruudukon sarakkeen on oltava niin laaja kuin kapein elementti, tavalla ei johda ylivuotoon.

Katsotaanpa, miten edellinen kuva, jossa on kuva, näyttää siltä, ​​että jos muutamme ensimmäisen sarakkeen arvoa min-pitoisuus:

 .kontti grid-template-columns: min-sisältö 1fr 1fr; / ** * sama minmax () -merkinnällä: * ruudukon mallit-kolonnit: minmax (min-sisältö, min-sisältö) 1fr 1fr; * / 

Jätin vihreän taustan kuvan alle niin, että näet ensimmäisen ruudukon koko koko.

Kuten näette, ensimmäinen sarake säilyttää pienimmän leveyden voidaan saavuttaa ilman ylivuotoa. Tässä esimerkissä tämä määritellään neljännen ja seitsemännen ruudukon solujen minimileveydellä, joka on peräisin täyte ja Fonttikoko ominaisuudet ensimmäisessä solussa voidaan kutistua nollaan ilman ylivuotoa.

Jos ruudukko sisältää tekstirivin, min-pitoisuus olisi sama kuin pisimmän sanan leveys, se on pienin elementti, jota ei voi enää pienentää ilman ylivuotoa. Tässä on hyvä BitsOfCoden artikkeli, jossa voit nähdä miten min-pitoisuus ja max-sisältöä käyttäytyä, kun ruudukko sisältää tekstirivin.

käyttämällä min-pitoisuus ja max-sisältöä yhdessä

Jos me käyttää min-pitoisuus ja max-sisältöä yhdessä sisällä MinMax () funktio saamme ruudukon sarakkeen, joka:

1. on reagoiva
2. ei ole ylivuotoa
3. ei kasva laajemmaksi kuin sen laajin elementti

 .kontti grid-template-columns: minmax (min-sisältö, max-sisältö) 1fr 1fr;  

Voimme myös käyttää min-pitoisuus ja max-sisältöä avainsanat yhdessä muiden pituuden arvojen kanssa sisällä MinMax () toiminnassa, kunnes sääntö on järkevää. Esimerkiksi, minmax (25%, enimmäispitoisuus) tai minmax (min-sisältö, 300px) molemmat ovat voimassa olevia sääntöjä.

auto

Lopuksi voimme käyttää myös auto avainsana väitteenä MinMax () toimia.

Kun auto on käytetään enintään, sen arvo on identtinen max-sisältöä.

Kun se on käytetään vähintään, sen arvo on min-leveys / min-height sääntö, mikä tarkoittaa sitä auto on joskus sama kuin min-pitoisuus, mutta ei aina.

Edellisessä esimerkissä, min-pitoisuus ei vastaa auto, koska ensimmäisen ruudukon pylvään minimileveys on aina pienempi kuin sen minimikorkeus. Niinpä kuuluva CSS-sääntö:

 .kontti grid-template-columns: minmax (min-sisältö, max-sisältö) 1fr 1fr;  

voitaisiin myös kirjoittaa näin:

 .kontti grid-template-columns: minmax (auto, auto) 1fr 1fr;  

auto avainsana voi olla myös käytetään muiden staattisten ja dynaamisten yksiköiden kanssa (pikselit, fr-yksikkö, prosenttiosuudet jne.) MinMax () toiminto minmax (auto, 300px) olisi pätevä sääntö.

Voit testata, miten min-pitoisuus, max-sisältöä, ja auto avainsanat toimivat MinMax () toimivat seuraavassa Codepen-demossa: