CSS Grid Layout Fr üksuse juhend
The CSS Grid Layout Module saadeti koos uus CSS-üksus nimega fr üksus. Nii lihtne kui võimalik, fr on sõna lühend “murdosa”. Uus üksus võimaldab võrku kiiresti lõigata proportsionaalsetesse veergudesse või ridadesse. Selle tulemusena luuakse täielikult reageerivad ja paindlikud võrgud muutub peaaegu imeliseks.
Kuna fraktsiooni üksus võeti kasutusele koos Grid Layout mooduliga, saate seda kasutada mis tahes brauseris toetab CSS-võrku. Kui soovite ka vanemaid brausereid toetada, on siin suurepärane CSS-võrgupolüfill mis võimaldab teil kasutada mitte ainult fr üksus, kuid ka teised võrgufunktsioonid.
Põhikasutus
Kõigepealt vaatame a põhivõrk mis kasutab murdühikut. Alltoodud paigutus jagab ruumi kolm võrdse laiusega veergu ja kaks võrdse kõrgusega rida.
Kuuluv HTML on valmistatud kuus jagamist tähistatud tähega .kasti klassi, sees .ümbris div.
1.2.3.4.5.6.
Võrgu paigutusmooduli kasutamiseks peate lisama kuva: võrk; CSS-i omadus ümbrisele. The grid-malli-veerud vara kasutab fr ühik väärtusena; the kolme veeru suhe on 1: 1: 1.
Võrgu ridade jaoksruudustik-rida vara), ma ei kasutanud seda fr üksus, sest see on mõttekas ainult siis, kui ümbris on on fikseeritud kõrgusega. Vastasel juhul võib mõnel seadmel olla kummalisi tulemusi, kuid isegi siis fr üksus ei hoia seda suhet (ja see on tohutu).
The võrgu-vahe vara lisab 10px võrku kastide vahel. Kui te ei soovi tühimikku, eemaldage see omadus.
.ümbris display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-read: 200px 200px; võrgupuudus: 10 px; .box color: white; teksti joondamine: keskus; fondi suurus: 30px; polster: 25px;
Pange tähele, et ülaltoodud CSS ei sisalda mõnda põhilist stiili nagu taustavärvid. Sa saad leidke artikli lõpus demo kogu kood.
Muuda suhet
Loomulikult ei saa te kasutada ainult 1: 1: 1 vaid mis tahes suhe, mida soovite. Allpool kasutasin 1: 2: 1 fraktsioonid mis jagavad ruumi ka kolm veergu kuid keskmine veerg on kaks korda laiem nagu teised kaks.
Ma suurendasin ka selle väärtust võrgu-vahe et näha, kuidas see paigutust muudab. Põhimõtteliselt brauser arvab ruudukujulise vahe vaateava laiusest (selles näites lisatakse võrgupilu kuni 80 pikslit) ja viilud üles vastavalt antud fraktsioonidele.
.ümbris display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-read: 200px 200px; võrgupuudus: 40px;
Ühendage fr teiste CSS-üksustega
Sa saad kombineerige the fr üksusega muud CSS-üksused samuti. Näiteks allpool toodud näites kasutasin seda 60% 1fr 2fr suhe minu võrku.
Niisiis, kuidas see toimib? The brauser määrab 60% vaateava laiusest esimesele veerule. Seejärel jagab ülejäänud osa 1: 2 fraktsioonideks.
Sama võib kirjutada ka kui 60% 13,33333% 26,66667%. Kuid ausalt öeldes, miks peaks keegi seda vormi kasutama? Fraktsiooniüksuse suur eelis on see, et see on parandab koodi loetavust. Veelgi enam, see on täiesti täpne, protsentuaalne formaat moodustab siiski ainult 99,9999%.
.ümbris display: grid; grid-templ-kolonnid: 60% 1fr 2fr; grid-template-read: 200px 200px; võrgupuudus: 10 px;
Lisaks protsentidele, Te saate kasutada ka teisi CSS-üksusi koos fraktsiooniosaga pt, px, em, ja rem.
Lisa tühikuga fr
Mis siis, kui te ei soovi, et teie disain oleks täis ja lisada mõned tühikud oma võrku? Fraktsiooni ühikul on ka lihtne lahendus.
Nagu näete, on see võrk on tühi veerg samas säilitab see kõik kuus kasti. Selle paigutuse jaoks peame ruumi üles lõigama neljaks veeruks kolme asemel. Niisiis, me kasutame 1fr 1fr 1fr 1fr väärtuse grid-malli-veerud vara.
Me lisame tühja veeru grid-mall-alad vara, kasutades dot märkus. Põhimõtteliselt võimaldab see omadus seda teha viide nimega võrgupiirkonnad. Ja saate võrgupiirkonnad nimega võrgupiirkond kasutatav vara iga piirkonna kohta eraldi.
.ümbris display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-read: 200px 200px; võrgupuudus: 10 px; grid-template-area: "box-1 box-2. box-3" "box-4 box-5. box-6"; .box-1 grid-area: box-1; .box-2 grid-area: box-2; .box-3 grid-area: box-3; .box-4 grid-area: box-4; .box-5 grid-area: box-5; .box-6 grid-area: box-6;
Tühikualad ei pea tingimata moodustama veergu, nad on võib olla kõikjal võrgus.
The korrake () funktsiooni
Võite kasutada ka fr üksus koos korrake () funktsiooni le lihtsam süntaks. , see ei ole vajalik, kui teil on vaid lihtne võrk, kuid see võib olla mugav, kui soovite keeruline paigutus, näiteks a sisestatud võrku.
.ümbris display: grid; grid-template-columns: korrake (3, 1fr); / * grid-mall-veerud: 1fr 1fr 1fr; * / grid-template-rida: 200 px; võrgupuudus: 10 px;
The korrake (3, 1fr) süntaks tulemuseks on sama paigutus nagu 1fr 1fr 1fr. Alltoodud paigutus on sama nagu esimene näide.
Kui sa suurendama kordajat sees korrake () funktsioonil on rohkem veerge. Näiteks, korrake (6, 1fr) tulemuseks on kuus võrdset veergu. Sel juhul kõik meie kastid on samas reas, mis tähendab, et piisab ainult ühest väärtusest (200 px) ruudustik-rida vara.
.ümbris display: grid; grid-template-columns: korrake (6, 1fr); grid-template-rida: 200 px; võrgupuudus: 10 px;
Sa võid kasutada korrake () rohkem kui üks kord. Näiteks järgneva näite tulemuseks on võrk, milles on viimased kolm veergu kaks korda laiem esimesed kolm.
.ümbris display: grid; grid-template-columns: korrake (3, 1fr) kordamist (3, 2fr); grid-template-rida: 200 px; võrgupuudus: 10 px;
Sa saad ka kombineerige korrake () teiste CSS-üksustega. Näiteks võite kasutada 200 px kordus (4, 1fr) 200 px kehtiva koodina.
Kui olete huvitatud, kuidas seda teha luua keerulisi skeeme CSS Grid mooduliga korrake () funktsioon ja fr Rachel Andrew'l on huvitav blogipostitus selle kohta, kuidas seda teha.
Demo eksperimenteerimiseks
Lõpuks, siin on demo, mida ma lubasin. See kasutab sama koodi kui käesoleva artikli esimene näide. Fork see ja vaata, mida saate saavutada fr üksus.
