„CSS Grid Layout Fr Unit“ vadovas

The CSS tinklelio išdėstymo modulis buvo išsiųstas su a naujas CSS įrenginys vadinamas fr vienetas. Taip paprasta, kaip ji gali būti, fr yra žodžio santrumpa “frakcija”. Naujas vienetas leidžia greitai supjaustyti tinklelį į proporcingas stulpelius ar eilutes. Kaip rezultatas, sukurti visiškai reaguojantys ir lankstūs tinklai tampa beveik vėjas.

Kadangi frakcijos vienetas buvo pristatytas kartu su „Grid Layout“ moduliu, galite jį naudoti bet kurioje naršyklėje palaiko CSS tinklą. Jei taip pat norite palaikyti senesnes naršykles, tai yra puiki CSS tinklelio polifilis tai leidžia naudoti ne tik fr vienetas, bet ir kitos tinklo funkcijos.

Pagrindinis naudojimas

Pirma, pažvelkime a pagrindinio tinklo kuris naudoja frakcijos vienetą. Toliau pateiktas išdėstymas padalija erdvę į trys vienodo pločio stulpeliai ir dvi vienodo aukščio eilutės.

Susidedantis HTML yra pagamintas iš šeši divai pažymėta .dėžė klasė, viduje .vyniojamasis popierius div.

 
 
1.
 
2.
 
3.
 
4.
 
5.
 
6.
 
 

Norėdami naudoti „Grid Layout“ modulį, turite pridėti ekranas: tinklelis; CSS savybė pakuotei. The tinklelio šablonai nuosavybė naudoja fr vienetą kaip vertę; trijų stulpelių santykis yra 1: 1: 1.

Tinklelio eilutėms (tinklelio šablonų eilutės nuosavybė), aš nenaudojau fr vienetą, nes tai tik prasminga, jei pakuotė turi fiksuotą aukštį. Priešingu atveju, kai kuriuose įrenginiuose jis gali turėti keistų rezultatų, tačiau net ir tada fr vienetas išlaiko santykį (ir tai didžiulis).

The tinklo atotrūkis nuosavybė prideda 10px tinklelį tarp dėžių. Jei nenorite, kad spraga būtų pašalinta, tiesiog pašalinkite šią savybę.

 .įvyniojimas display: grid; tinklelio šablonai: 1fr 1fr 1fr; grid-template-rows: 200px 200px; tinklelio tarpas: 10px; . dėžutė spalva: balta; teksto derinimas: centras; šrifto dydis: 30px; paminkštinimas: 25px;  

Atminkite, kad aukščiau pateiktame CSS nėra kai kurių pagrindinių stilių, pvz., Fono spalvų. Tu gali rasti visą kodą demo pabaigoje.

Keisti santykį

Žinoma, jūs negalite naudoti tik 1: 1: 1, bet bet kokį norimą santykį. Žemiau aš naudoju 1: 2: 1 frakcijos taip pat padalija erdvę į trys stulpeliai bet vidutinis stulpelis bus dvigubai platesnis kaip ir kiti du.

Aš taip pat padidina vertę tinklo atotrūkis kad pamatytumėte, kaip jis keičia išdėstymą. Iš esmės naršyklė atskaito tinklelio tarpą nuo peržiūros srities pločio (šiame pavyzdyje tinklelio tarpai sudaro iki 80 pikselių), ir supjaustykite likusias dalis pagal nurodytas frakcijas.

 .įvyniojimas display: grid; tinklelio šablonai: 1fr 2fr 1fr; grid-template-rows: 200px 200px; tinklo tarpas: 40px;  

Sujunkite fr su kitais CSS įrenginiais

Tu gali derinti fr su bet kurie kiti CSS vienetai taip pat. Pavyzdžiui, toliau pateiktame pavyzdyje naudoju 60% 1fr 2fr mano tinklelio santykis.

Taigi, kaip tai veikia? The naršyklė priskiria 60% peržiūros srities pločio į pirmąjį stulpelį. Tada likusioji dalis padalijama į 1: 2 frakcijas.

Tas pats dalykas taip pat galėtų būti parašytas kaip 60% 13,33333% 26,66667%. Bet atvirai, kodėl kas nors norėtų naudoti šį formatą? Didelis frakcijos vieneto privalumas yra tai, kad jis pagerina kodo nuskaitymą. Be to, tai yra visiškai tikslūs, procentinė forma vis dar sudaro tik 99,9999%.

 .įvyniojimas display: grid; tinklelio šablonai: 60% 1fr 2fr; grid-template-rows: 200px 200px; tinklelio tarpas: 10px;  

Be procentų, taip pat galite naudoti kitus CSS įrenginius kartu su frakcijos vienetu pt, px, em, ir rem.

Pridėti tarpą su fr

Ką daryti, jei nenorite, kad jūsų dizainas būtų užterštas ir pridėti šiek tiek tarpo į tinklą? Frakcijos vienetas taip pat turi paprastą sprendimą.

Kaip matote, šis tinklas turi tuščią stulpelį tačiau vis dar išlaiko visus šešis langelius. Dėl šio išdėstymo mes turime supjaustyti erdvę į keturias stulpelius vietoj trijų. Taigi, mes naudojame 1fr 1fr 1fr 1fr vertė tinklelio šablonai nuosavybė.

Mes pridėjome tuščią stulpelį viduje tinklo šablonų sritys nuosavybė, naudojant taškų žymėjimas. Iš esmės ši savybė leidžia nuoroda vadinama tinklelio sritimis. Be to, galite nurodyti tinklo sritis su tinklo plotas turtą, kurį reikia naudoti atskirai kiekvienai sričiai.

 .įvyniojimas display: grid; tinklelio šablonai: 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px; tinklelio tarpas: 10px; tinklinio šablono sritys: "box-1 box-2. 3 langelis" "4 langelis-5 langelis. 6 langelis";  .box-1 tinklelio sritis: 1 langelis;  .box-2 tinklelio sritis: 2 langelis;  .box-3 tinklelio sritis: 3 langelis;  .box-4 tinklelio sritis: 4 langelis;  .box-5 tinklelio sritis: 5 langelis;  .box-6 tinklelio sritis: 6 langelis;  

Erdvės sritys nebūtinai turi sudaryti stulpelį, jie gali būti bet kur tinkle.

The pakartoti () funkcija

Taip pat galite naudoti fr vienetas kartu su pakartoti () funkcija dėl paprastesnė sintaksė. , tai nėra būtina, jei turite tik paprastą tinklelį, bet gali būti naudinga, kai norite įgyvendinti sudėtingą išdėstymą, pavyzdžiui, a įmontuotas tinklelis.

 .įvyniojimas display: grid; tinklelio šablonai: kartoti (3, 1fr); / * tinklelio šablonai: 1fr 1fr 1fr; * / Grid-template-rows: 200px; tinklelio tarpas: 10px;  

The pakartoti (3, 1fr) sintaksė rezultatas yra toks pat kaip 1fr 1fr 1fr. Žemiau pateiktas išdėstymas yra tas pats, kaip ir pirmasis pavyzdys.

Jei tu padidinti koeficientą viduje pakartoti () funkcija turės daugiau stulpelių. Pavyzdžiui, pakartoti (6, 1fr) rezultatus šešios lygios stulpeliai. Šiuo atveju, visos mūsų dėžutės bus toje pačioje eilutėje, tai reiškia, kad pakanka naudoti tik vieną vertę (200px) tinklelio šablonų eilutės nuosavybė.

 .įvyniojimas display: grid; tinklelio šablonai: kartoti (6, 1fr); tinklelio šablonai: 200px; tinklelio tarpas: 10px;  

Tu gali naudoti pakartoti () daugiau nei kartą. Pavyzdžiui, toliau pateiktame pavyzdyje atsiranda tinklelis, kuriame yra trys paskutinės stulpeliai dvigubai platesnis kaip pirmieji trys.

 .įvyniojimas display: grid; grid-template-columns: pakartokite (3, 1fr) pakartojimą (3, 2fr); tinklelio šablonai: 200px; tinklelio tarpas: 10px;  

Tu taip pat gali derinti pakartoti () su kitais CSS įrenginiais. Pavyzdžiui, galite naudoti 200px pakartojimas (4, 1fr) 200px kaip galiojantį kodą.

Jei jus domina, kaip tai padaryti sukurti sudėtingus išdėstymus su CSS Grid moduliu pakartoti () funkcija ir fr „Rachel Andrew“ turi įdomų dienoraščio įrašą apie tai, kaip galite tai padaryti.

Demonstracinis bandymas

Pagaliau, čia yra pažadas, kurį pažadėjau. Jis naudoja tą patį kodą kaip ir pirmasis šio straipsnio pavyzdys. Nuplėškite jį ir pažiūrėkite, ką galite pasiekti fr vienetas.