Guide till CSS Grid Layout Fr Unit
De CSS Grid Layout Module skickades med a ny CSS-enhet ringde fr enhet. Så enkelt som det kan vara, fr är förkortning av ordet “fraktion”. Den nya enheten gör det möjligt att snabbt skära gallret upp i proportionella kolumner eller rader. Som ett resultat skapandet av fullt mottagliga och flexibla nät blir nästan en bris.
Eftersom fraktionsenheten introducerades tillsammans med Grid Layout-modulen kan du använda den i vilken webbläsare som helst stöder CSS-nätet. Om du också vill stödja äldre webbläsare här är det bra CSS grid polyfill som låter dig använda inte bara fr enhet men även andra nätfunktioner.
Grundläggande användning
Låt oss först titta på a grundläggande rutnät som använder fraktionenheten. Layouten nedan delar upp utrymmet i tre lika bredd kolumner och två rader med lika höjd.
Den tillhörande HTML är gjord av sex divs markerad med .låda klass, inuti a .omslag div.
1.2.3.4.5.6.
För att använda modulen Grid Layout måste du lägga till display: rutnät; CSS-egenskapen till omslaget. De grid-template-kolonner egendom använder fr enhet som värde; de förhållandet mellan de tre kolumnerna är 1: 1: 1.
För rutnät raderna (grid-template-rader egendom), använde jag inte fr enhet, eftersom det bara är meningsfullt om omslaget har en fast höjd. Annars kan det ha konstiga resultat på vissa enheter, men även då fr enhet upprätthåller förhållandet (och det här är enormt).
De grid-gap fast egendom lägger till ett 10px rutnät mellan lådorna. Om du inte vill ha något gap, ta bara bort den här egenskapen.
.wrapper display: rutnät; rutmall-kolumner: 1fr 1fr 1fr; raster-mall-rader: 200px 200px; gallergap: 10px; .box färg: vit; text-align: center; typsnittstorlek: 30px; vaddering: 25px;
Observera att CSS ovan inte innehåller några grundläggande styling som bakgrundsfärger. Du kan hitta hela koden i demo i slutet av artikeln.
Ändringsförhållande
Naturligtvis kan du inte bara använda 1: 1: 1 men vilket förhållande du vill ha. Nedan använde jag 1: 2: 1-fraktioner det delar också utrymmet i tre kolumner men mellanskolonnen kommer att vara dubbelt så bred som de andra två.
Jag har också ökat värdet av grid-gap så att du kan se hur det ändrar layouten. I grund och botten webbläsaren drar av nätgapet från visningsbredden (i det här exemplet lägger gallret mellanrum upp till 80px) och skivar upp resten enligt de givna fraktionerna.
.wrapper display: rutnät; galler-mall-kolumner: 1fr 2fr 1fr; raster-mall-rader: 200px 200px; gallergap: 40px;
Kombinera fr med andra CSS-enheter
Du kan kombinera de fr enhet med alla andra CSS-enheter också. Till exempel, i exemplet nedan använde jag 60% 1fr 2fr förhållandet för mitt nät.
Så, hur fungerar det här? De webbläsaren tilldelar 60% av visningsbredden till den första kolumnen. Sedan delar den resten av utrymmet i 1: 2 fraktioner.
Samma sak kan också skrivas som 60% 13.33333% 26.66667%. Men okej, varför skulle någon vilja använda det formatet? En stor fördel med fraktionsenheten är det förbättrar kodläsbarheten. Dessutom är det helt korrekt, som procentuellt format lägger fortfarande till endast 99,9999%.
.wrapper display: rutnät; rutmall-kolumner: 60% 1fr 2fr; raster-mall-rader: 200px 200px; gallergap: 10px;
Bortsett från procentandelar, Du kan också använda andra CSS-enheter tillsammans med fraktionenheten, till exempel pt, px, em, och rem.
Lägg till whitespace med fr
Vad händer om du inte vill att din design ska vara rörig och lägg till lite blankutrymme till ditt nät? Fraktionsenheten har också en lätt lösning för det.
Som du kan se, detta rutnät har en tom kolumn medan den fortfarande behåller alla de sex rutorna. För denna layout behöver vi skära ut mellanslaget in i fyra kolumner istället för tre. Så, vi använder 1fr 1fr 1fr 1fr värde för grid-template-kolonner fast egendom.
Vi lägger till den tomma kolumnen inuti grid-template-områden egendom med hjälp av punktnotering. I grund och botten tillåter du den här egenskapen referensnamn. Och du kan namnge rutnät med grid-område egendom som du behöver använda separat för varje område.
.wrapper display: rutnät; rutnät-kolumner: 1fr 1fr 1fr 1fr; raster-mall-rader: 200px 200px; gallergap: 10px; rutnät-mallområden: "box-1 box-2. box-3" "box-4 box-5. box-6"; .box-1 rutnätområde: box-1; .box-2 rutnätområde: box-2; .box-3 rutnätområde: box-3; .box-4 rutnätområde: box-4; .box-5 rutnätområde: box-5; .box-6 rutnätområde: box-6;
Vita utrymmena behöver inte nödvändigtvis bilda en kolumn, de kan vara var som helst i rutnätet.
De upprepa() fungera
Du kan också använda fr enhet tillsammans med upprepa() fungera för en enklare syntax. , Detta är inte nödvändigt om du bara har ett enkelt rutnät men kan vara till nytta när du vill genomföra en komplicerad layout, till exempel a nestad rutnät.
.wrapper display: rutnät; rutnätmall-kolumner: upprepa (3, 1fr); / * galler-mall-kolumner: 1fr 1fr 1fr; * / galler-mall-rader: 200px; gallergap: 10px;
De upprepa (3, 1fr) syntax resulterar i samma layout som 1fr 1fr 1fr. Layouten nedan är densamma som det första exemplet.
Om du öka multiplikatorn inuti upprepa() funktion du kommer att ha fler kolumner. Till exempel, upprepa (6, 1fr) resulterar i sex lika kolumner. I det här fallet, alla våra lådor kommer att ligga i samma rad, vilket betyder att det räcker att bara använda ett värde (200px) för grid-template-rader fast egendom.
.wrapper display: rutnät; rutmall-kolumner: upprepa (6, 1fr); raster-mall-rader: 200px; gallergap: 10px;
Du kan använda upprepa() mer än en gång. Exempelvis resulterar följande exempel i ett rutnät där de tre sista kolumnerna är dubbelt så bred som de tre första.
.wrapper display: rutnät; rutmall-kolumner: repetera (3, 1fr) upprepa (3, 2fr); raster-mall-rader: 200px; gallergap: 10px;
Du kan också kombinera upprepa() med andra CSS-enheter. Till exempel kan du använda 200px upprepning (4, 1fr) 200px som en giltig kod.
Om du är intresserad av hur man gör det skapa komplexa layouter med CSS Grid-modulen, upprepa() funktion och fr Enhet Rachel Andrew har ett intressant blogginlägg om hur du kan göra det.
En demonstration för experiment
Till sist, här är den demo som jag lovade. Den använder samma kod som det första exemplet i den här artikeln. Gaffel det och se vad du kan uppnå med fr enhet.
