CSS Grid Layout Fr -yksikön opas
CSS Grid Layout Module toimitettiin a uusi CSS-yksikkö soitti FR yksikkö. Niin suoraviivaista kuin se voi olla, FR on sanan lyhenne “jae”. Uusi yksikkö mahdollistaa ruudukon nopeasti leikkaamisen suhteellisiin sarakkeisiin tai riveihin. Tämän seurauksena luodaan täysin reagoivia ja joustavia verkkoja tulee lähes tuulta.
Koska fraktioyksikkö otettiin käyttöön yhdessä Grid Layout -moduulin kanssa, voit käyttää sitä missä tahansa selaimessa tukee CSS-verkkoa. Jos haluat myös tukea vanhempia selaimia, tässä on hyvä CSS-ruudukon polyfill jonka avulla voit käyttää vain FR yksikköä, mutta myös muita verkkotoimintoja.
Peruskäyttö
Katsokaamme ensin a perusverkko joka käyttää murto-osaa. Alla oleva jakauma jakaa tilan kolme yhtä leveä saraketta ja kaksi yhtä korkeusriviä.
Oheinen HTML on tehty kuusi divia merkitty .laatikko luokka, sisällä .kääre div.
1.2.3.4.5.6.
Jos haluat käyttää Grid Layout -moduulia, sinun on lisättävä näyttö: ruudukko; CSS-ominaisuus kääreeseen. grid-template-pylväät omaisuus käyttää FR yksikkö arvoina; Kolmen sarakkeen suhde on 1: 1: 1.
Ruudukon riveille (grid-template-rivinen omaisuutta), en käyttänyt FR yksikkö, koska se on järkevää vain, jos kääre on on kiinteä korkeus. Muuten sillä voi olla outoja tuloksia joissakin laitteissa FR yksikkö ylläpitää suhdetta (ja tämä on valtava).
grid-aukko omaisuus lisää 10px ruudukon ruutujen väliin. Jos et halua mitään aukkoa, poista tämä ominaisuus.
.kääre display: grid; grid-template-columns: 1fr 1fr 1fr; ruudukko-rivit: 200px 200px; ruudukko: 10px; .box väri: valkoinen; text-align: center; kirjasinkoko: 30px; pehmuste: 25px;
Huomaa, että yllä oleva CSS ei sisällä joitakin perusasioita, kuten taustavärejä. Sinä pystyt etsi koko koodi demosta artikkelin lopussa.
Muutossuhde
Tietenkään et voi käyttää vain 1: 1: 1 vaan haluamasi suhde. Alla käytin 1: 2: 1 fraktiot joka myös jakaa tilan kolme saraketta mutta keskimmäinen sarake on kaksi kertaa niin leveä kuin muut kaksi.
Lisäsin myös arvon grid-aukko jotta näet, miten se muuttaa asettelua. Pohjimmiltaan selain vähentää ruudukon aukon näkymän leveydestä (tässä esimerkissä ruudukon aukot lisäävät jopa 80 pistettä) ja viipaloi loput annettujen fraktioiden mukaan.
.kääre display: grid; grid-template-columns: 1fr 2fr 1fr; ruudukko-rivit: 200px 200px; ruudukko: 40px;
Yhdistää FR muiden CSS-yksiköiden kanssa
Sinä pystyt yhdistää FR yksikön kanssa muita CSS-yksiköitä yhtä hyvin. Esimerkiksi alla olevassa esimerkissä käytin 60% 1fr 2fr suhde verkkoon.
Miten tämä toimii? selain määrittää 60%: n katselualueen leveydestä ensimmäiseen sarakkeeseen. Sitten se jakaa loput tilan 1: 2-fraktioihin.
Sama asia voidaan kirjoittaa myös 60% 13,33333% 26,66667%. Mutta rehellisesti sanottuna, miksi kukaan haluaisi käyttää tätä muotoa? Fraktioyksikön suuri etu on se, että se on parantaa koodin luettavuutta. Lisäksi se on täysin tarkka, prosenttiosuus on vielä vain 99,9999%.
.kääre display: grid; grid-templ-pylväät: 60% 1fr 2fr; ruudukko-rivit: 200px 200px; ruudukko: 10px;
Prosenttien lisäksi, Voit käyttää myös muita CSS-yksiköitä yhdessä fraktioyksikön kanssa pt, px, em, ja rem.
Lisää välilyönti FR
Entä jos et halua, että suunnittelusi on täynnä ja lisää joitakin välilyöntejä verkkoon? Fraktioyksiköllä on myös helppo ratkaisu.
Kuten näette, tämä ruudukko on tyhjä sarake se säilyttää kuitenkin kaikki kuusi laatikkoa. Tätä asettelua varten meidän on leikattava tilaa ylöspäin neljään sarakkeeseen kolmen sijasta. Joten käytämme 1fr 1fr 1fr 1fr arvo grid-template-pylväät omaisuus.
Lisäämme tyhjän sarakkeen grid-template-alueilla omaisuutta käyttäen pistemerkintä. Periaatteessa tämä ominaisuus mahdollistaa viite nimeltään ruudukon alueet. Ja voit nimetä ruudukon alueet grid-alue omaisuutta, jota tarvitset erikseen kullekin alueelle.
.kääre display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; ruudukko-rivit: 200px 200px; ruudukko: 10px; grid-template-alueet: "box-1 box-2. box-3" "box-4 laatikko-5. laatikko-6"; .box-1 ruudukko: laatikko-1; .box-2 ruudukko: laatikko-2; .box-3 ruudukko: laatikko-3; .box-4 ruudukko: laatikko-4; .box-5 ruudukko: laatikko-5; .box-6 ruudukko: laatikko-6;
Välilyönti-alueet ei välttämättä tarvitse muodostaa saraketta, ne voi olla missä tahansa ruudussa.
toistaa() toimia
Voit myös käyttää FR yksikkö yhdessä toistaa() toimia a: lle yksinkertaisempi syntaksi. , tämä ei ole tarpeen, jos sinulla on vain yksinkertainen ruudukko, mutta se voi olla kätevä, kun haluat toteuttaa monimutkainen asettelu, esimerkiksi a sisäkkäinen verkko.
.kääre display: grid; grid-template-columns: toista (3, 1fr); / * ruudukon malli-sarakkeet: 1fr 1fr 1fr; * / ruudukko-rivit: 200px; ruudukko: 10px;
toista (3, 1fr) syntaksi tulos on sama kuten 1fr 1fr 1fr. Alla oleva layout on sama kuin ensimmäinen esimerkki.
Jos sinä lisätä kerrointa sisällä toistaa() toiminto on enemmän sarakkeita. Esimerkiksi, toista (6, 1fr) johtaa kuusi yhtäläistä saraketta. Tässä tapauksessa kaikki laatikot tulee samaan riviin, mikä tarkoittaa, että riittää, että käytetään vain yhtä arvoa (200px) grid-template-rivinen omaisuus.
.kääre display: grid; grid-template-columns: toista (6, 1fr); ruudukko-rivit: 200px; ruudukko: 10px;
Voit käyttää toistaa() enemmän kuin kerran. Esimerkiksi seuraava esimerkki johtaa verkkoon, jossa viimeiset kolme saraketta ovat kaksi kertaa niin leveä kuin ensimmäiset kolme.
.kääre display: grid; grid-template-columns: toista (3, 1fr) toisto (3, 2fr); ruudukko-rivit: 200px; ruudukko: 10px;
Voit myös yhdistää toistaa() muiden CSS-yksiköiden kanssa. Voit esimerkiksi käyttää 200px toisto (4, 1fr) 200px kelvollisena koodina.
Jos olet kiinnostunut siitä, miten luoda monimutkaisia asetteluja CSS Grid -moduulin kanssa toistaa() toiminto ja FR Rachel Andrew -yksiköllä on mielenkiintoinen blogiviesti siitä, miten voit tehdä sen.
Demo kokeiluun
vihdoin, tässä demo, jonka lupasin. Se käyttää samaa koodia kuin ensimmäisessä esimerkissä tässä artikkelissa. Haista se ja katso, mitä voit saavuttaa FR yksikkö.
