Útmutató a CSS Grid Layout Fr egységhez

A CSS Grid Layout Module szállították a új CSS egység hívta a fr egység. Olyan egyszerű, mint lehet, fr az a a szó rövidítése “töredék”. Az új egység lehetővé teszi a rács gyors szeletelését arányos oszlopokba vagy sorokba. Ennek eredményeként a létrehozása teljesen rugalmas és rugalmas rácsok majdnem szellővé válik.

Mivel a frakció egységet a Grid Layout modullal együtt bevezették, bármelyik böngészőben használhatja támogatja a CSS rácsot. Ha azt szeretné, hogy az idősebb böngészőket is támogassa, itt nagyszerű CSS-rácsos polifill amely nem csak a fr egység, de más hálózati funkciók is.

Alapvető használat

Először nézzük meg a alaprács amely a frakcióegységet használja. Az alábbi elrendezés osztja a helyet három egyenlő szélességű oszlop és két egyenlő magasságú sor.

A hozzátartozó HTML készült hat osztás jelölve .doboz osztály, belül a .csomagolás div.

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

A Grid Layout modul használatához hozzá kell adnia a kijelző: rács; CSS tulajdonság a csomagolóhoz. A grid-template-oszlopok az ingatlan a fr egységként; a a három oszlop aránya 1: 1: 1.

A rács sorok (grid-template-sorok nem használtam fr egység, mivel csak akkor van értelme, ha a csomagolóanyag rögzített magasságú. Ellenkező esetben egyes eszközökön furcsa eredményeket lehet elérni, még akkor is, ha fr egység fenntartja az arányt (és ez hatalmas).

A rács-rés ingatlan hozzáad egy 10px rácsot a dobozok között. Ha nem akarsz szakadékot, távolítsa el ezt a tulajdonságot.

 .wrapper display: grid; grid-template-oszlopok: 1fr 1fr 1fr; grid-template-rows: 200px 200px; rács-rés: 10px;  .box color: white; szöveg-igazítás: központ; betűméret: 30px; párnázás: 25px;  

Megjegyzés: a fenti CSS nem tartalmaz néhány alapvető stílust, például a háttérszínt. tudsz keresse meg a teljes kódot a bemutatóban a cikk végén.

Változási arány

Természetesen nem csak 1: 1: 1-et használhatsz bármely kívánt arány. Az alábbiakban használtam 1: 2: 1 frakciók amely szintén osztja a teret három oszlop de a középső oszlop lesz kétszer olyan széles mint a másik kettő.

Én is megnöveltem az értéket rács-rés így láthatja, hogyan változtatja meg az elrendezést. Alapvetően a böngésző levonja a rácsrést a nézetablak szélességéből (ebben a példában a rácsrések 80px-et adnak hozzá), és szeleteljük fel a többit az adott frakciók szerint.

 .wrapper display: grid; grid-template-oszlopok: 1fr 2fr 1fr; grid-template-rows: 200px 200px; rács-rés: 40px;  

Kombájn fr más CSS egységekkel

tudsz kombájn a fr egységgel bármely más CSS egységet is. Például az alábbi példában a 60% 1fr 2fr aránya a rácsomnak.

Szóval, hogyan működik ez? A A böngésző a nézetablak szélességének 60% -át adja meg az első oszlopba. Ezután a többi helyet 1: 2-es frakcióra osztja.

Ugyanez a dolog is írható 60% 13,33333% 26,66667%. De őszintén szólva, miért akarna bárki használni ezt a formátumot? A frakcióegység hatalmas előnye, hogy javítja a kód olvashatóságát. Sőt, ez is teljesen pontos, mivel a százalékos formátum még csak 99,9999% -ot tesz ki.

 .wrapper display: grid; rács-sablon oszlopok: 60% 1fr 2fr; grid-template-rows: 200px 200px; rács-rés: 10px;  

A százalékok mellett, más CSS egységeket is használhat a frakcióegységgel együtt pt, px, em, és rem.

Szóköz hozzáadása a fr

Mi van, ha nem akarod, hogy a dizájnod tele legyen és adjunk hozzá néhány szóközt a hálózathoz? A frakcióegységnek is könnyű megoldása van.

Mint látható, ez a rács van egy üres oszlop mindaddig megtartja mind a hat dobozt. Ehhez az elrendezéshez fel kell vágnunk a helyet négy oszlopba három helyett. Tehát használjuk a 1fr 1fr 1fr 1fr értéke a grid-template-oszlopok ingatlan.

Hozzáadjuk az üres oszlopot a grid-template-nak tulajdonság, a pontjelzés. Alapvetően ez a tulajdonság lehetővé teszi referencia neve rácsterületek. És a rácsterületeket a grid-terület tulajdonságot kell használni külön-külön minden területre.

 .wrapper display: grid; rács-sablon oszlopok: 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px; rács-rés: 10px; rács-sablon-területek: "box-1 box-2. 3. doboz-3" "4-es doboz-5.  .box-1 rács terület: 1. doboz;  .box-2 grid-area: box-2;  .box-3 grid-area: box-3;  .box-4 rács terület: 4. doboz;  .box-5 rács terület: 5. doboz;  .box-6 grid-area: box-6;  

A terek területei nem feltétlenül kell oszlopot alkotnia, ők bárhol lehet a rácsban.

A ismétlés() funkció

Használhatja a fr egység együtt ismétlés() funkció az a egyszerűbb szintaxis. , ez nem szükséges, ha csak egy egyszerű rács van, de hasznos lehet, ha szeretné bonyolult elrendezést hajt végre, például a beágyazott rács.

 .wrapper display: grid; grid-template-oszlopok: ismétlés (3, 1fr); / * rács-sablon oszlopok: 1fr 1fr 1fr; * / rács-sablon sorok: 200px; rács-rés: 10px;  

A ismétlés (3, 1fr) szintaxis ugyanazon elrendezést eredményez mint 1fr 1fr 1fr. Az alábbi elrendezés megegyezik az első példával.

Ha te növelje a szorzót benne ismétlés() funkciója több oszlopot tartalmaz. Például, ismétlés (6, 1fr) eredmények hat egyenlő oszlop. Ebben az esetben minden dobozunk ugyanabban a sorban lesz, ami azt jelenti, hogy elegendő csak egy értéket (200px) használni a grid-template-sorok ingatlan.

 .wrapper display: grid; grid-template-oszlopok: ismétlés (6, 1fr); rács-sablon sorok: 200px; rács-rés: 10px;  

Te tudod használni ismétlés() több mint egyszer. Például a következő példa olyan rácsot eredményez, amelyben az utolsó három oszlop található kétszer olyan széles mint az első három.

 .wrapper display: grid; grid-template-oszlopok: ismétlés (3, 1fr) ismétlés (3, 2fr); rács-sablon sorok: 200px; rács-rés: 10px;  

Te is kombájn ismétlés() más CSS egységekkel. Például használhatja 200px ismétlés (4, 1fr) 200px érvényes kódként.

Ha érdekel, hogyan összetett elrendezéseket hozhat létre a CSS Grid modullal, a ismétlés() funkció és a fr Rachel Andrew egy érdekes blogbejegyzést tartalmaz arról, hogyan teheted ezt.

Demó a kísérletezéshez

Végül, itt az ígért demó. Ugyanezt a kódot használja, mint a cikk első példája. Húzza meg, és nézze meg, mit érhet el a fr egység.