Guide til CSS Grid Layout Fr Unit
De CSS Grid Layout Module ble sendt med a ny CSS-enhet ringte fr enhet. Så enkelt som det kan være, fr er den forkortelse av ordet “brøkdel”. Den nye enheten gjør det mulig å raskt skjære rutenettet opp i proporsjonale kolonner eller rader. Som et resultat av etableringen av fullt responsive og fleksible grids blir nesten en bris.
Som brøksenheten ble introdusert sammen med Grid Layout-modulen, kan du bruke den i hvilken som helst nettleser det støtter CSS-nettet. Hvis du også vil støtte eldre nettlesere, er det bra CSS grid polyfill som lar deg bruke ikke bare fr enhet, men også andre rutenettfunksjoner.
Grunnleggende bruk
Først, la oss ta en titt på a grunnleggende rutenett som bruker fraksjonenheten. Oppsettet nedenfor deler rommet inn i tre likeverdige kolonner og to like høyde rader.
Den tilhørende HTML er laget av seks div merket med .eske klasse, inne i a .wrapper div.
1.2.3.4.5.6.
For å bruke Grid Layout-modulen må du legge til skjerm: grid; CSS eiendom til wrapper. De gitter-mal-kolonner eiendom bruker fr enhet som verdi; de forholdet mellom de tre kolonnene er 1: 1: 1.
For rutenettene (gitter-mal-rader eiendom), jeg brukte ikke fr enhet, som det bare gir mening hvis omslaget har en fast høyde. Ellers kan det ha merkelige resultater på enkelte enheter, men selv da fr enhet opprettholder forholdet (og dette er stort).
De gitter-gap eiendom legger til et 10 px rutenett i mellom boksene. Hvis du ikke vil ha noe gap, fjern bare denne egenskapen.
.wrapper display: grid; rutenett-mal-kolonner: 1fr 1fr 1fr; rutenett-mal-rader: 200px 200px; grid-gap: 10px; .box color: white; tekstjustering: center; skriftstørrelse: 30px; polstring: 25px;
Merk at CSS ovenfor ikke inneholder noen grunnleggende styling, for eksempel bakgrunnsfarger. Du kan finn hele koden i demoen på slutten av artikkelen.
Endringsforhold
Selvfølgelig kan du ikke bare bruke 1: 1: 1, men ethvert forhold du vil ha. Nedenfor brukte jeg 1: 2: 1 fraksjoner som også deler rommet inn i tre kolonner men den midterste kolonnen vil være dobbelt så bredt som de to andre.
Jeg økte også verdien av gitter-gap slik at du kan se hvordan det endrer oppsettet. I utgangspunktet, nettleseren trekker nettgapet fra visningsbredden (i dette eksemplet legger gridgapene opp til 80px), og skiver opp resten i henhold til de angitte fraksjoner.
.wrapper display: grid; rutenettmall-kolonner: 1fr 2fr 1fr; rutenett-mal-rader: 200px 200px; grid-gap: 40px;
Kombinere fr med andre CSS-enheter
Du kan kombinere de fr enhet med noen andre CSS-enheter også. For eksempel, i eksemplet nedenfor brukte jeg 60% 1fr 2fr forhold for mitt rutenett.
Så, hvordan virker dette? De nettleseren tildeler 60% av visningsbredden til den første kolonnen. Deretter deler den resten av rommet i 1: 2 fraksjoner.
Det samme kan også skrives som 60% 13.33333% 26.66667%. Men ærlig, hvorfor vil noen bruke det formatet? En stor fordel med brøkdel er det forbedrer kodenes lesbarhet. Dessuten er det helt nøyaktig, da prosentvis format bare legger opp bare til 99,9999%.
.wrapper display: grid; rutenettmall-kolonner: 60% 1fr 2fr; rutenett-mal-rader: 200px 200px; grid-gap: 10px;
Bortsett fra prosentandeler, Du kan også bruke andre CSS-enheter sammen med fraksjonenheten, for eksempel pt, px, em, og rem.
Legg til hvitt plass med fr
Hva om du ikke vil at designet ditt skal være rotete og legg til litt hvite plass til rutenettet ditt? Fraksjonenheten har også en enkel løsning for det.
Som du kan se, dette rutenettet har en tom kolonne mens den fremdeles beholder alle seks boksene. For denne utformingen må vi kutte opp plassen inn i fire kolonner i stedet for tre. Så bruker vi 1fr 1fr 1fr 1fr verdi for gitter-mal-kolonner eiendom.
Vi legger til den tomme kolonnen inne i grid-template-områder eiendom, ved hjelp av punktnotasjon. I utgangspunktet lar denne eiendommen deg referanse navn grid områder. Og du kan navnet rutenett med gitter-området eiendom du trenger å bruke separat for hvert område.
.wrapper display: grid; rutenett-mal-kolonner: 1fr 1fr 1fr 1fr; rutenett-mal-rader: 200px 200px; grid-gap: 10px; rutenett-mal-områder: "box-1 box-2. box-3" "box-4 box-5. box-6"; .box-1 grid-område: box-1; .box-2 grid-område: box-2; .box-3 grid-område: box-3; .box-4 grid-område: box-4; .box-5 grid-område: box-5; .box-6 grid-area: box-6;
De hvite romområdene trenger ikke nødvendigvis å danne en kolonne, de kan være hvor som helst i rutenettet.
De gjenta() funksjon
Du kan også bruke fr enhet sammen med gjenta() funksjon for en enklere syntaks. , Dette er ikke nødvendig hvis du bare har et enkelt rutenett, men kan komme til nytte når du vil implementere en komplisert layout, for eksempel a nestet rutenett.
.wrapper display: grid; rutenettmall-kolonner: gjenta (3, 1fr); / * grid-template-kolonner: 1fr 1fr 1fr; * / grid-mal-rader: 200px; grid-gap: 10px;
De gjenta (3, 1fr) syntaks resulterer i samme layout som 1fr 1fr 1fr. Oppsettet nedenfor er det samme som det første eksemplet.
Hvis du øk multiplikatoren inne i gjenta() funksjonen vil du ha flere kolonner. For eksempel, gjenta (6, 1fr) resulterer i seks like kolonner. I dette tilfellet er alle våre bokser vil være i samme rad, som betyr at det er nok å bruke bare en verdi (200px) for gitter-mal-rader eiendom.
.wrapper display: grid; rutenett-mal-kolonner: gjenta (6, 1fr); rutenett-mal-rader: 200px; grid-gap: 10px;
Du kan bruke gjenta() Mer enn en gang. For eksempel resulterer følgende eksempel i et rutenett der de tre siste kolonnene er dobbelt så bredt som de tre første.
.wrapper display: grid; grid-template-kolonner: gjenta (3, 1fr) gjenta (3, 2fr); rutenett-mal-rader: 200px; grid-gap: 10px;
Du kan også kombinere gjenta() med andre CSS-enheter. For eksempel kan du bruke 200px gjenta (4, 1fr) 200px som en gyldig kode.
Hvis du er interessert i hvordan Lag komplekse oppsett med CSS Grid-modulen, gjenta() funksjon og fr Enheten Rachel Andrew har et interessant blogginnlegg om hvordan du kan gjøre det.
En demonstrasjon for å eksperimentere
Endelig, her er den demoen jeg lovet. Den bruker den samme koden som det første eksemplet i denne artikkelen. Fork det, og se hva du kan oppnå med fr enhet.
