Guide til CSS Grid Layout Fr Unit
Det CSS Grid Layout Module blev afsendt med a ny CSS enhed kaldte fr enhed. Så ligetil som det kan være, fr er forkortelse af ordet “fraktion”. Den nye enhed gør det muligt hurtigt at skære gitteret op i proportional kolonner eller rækker. Som et resultat af oprettelsen af fuldt lydhør og fleksible net bliver næsten en brise.
Da fraktionsenheden blev introduceret sammen med Grid Layout-modulet, kan du bruge det i enhver browser som understøtter CSS-nettet. Hvis du også vil støtte ældre browsere her er en stor CSS grid polyfill det giver dig mulighed for at bruge ikke kun fr enhed men også andre netfunktioner.
Grundlæggende brug
Lad os først se på a grundlæggende gitter der bruger fraktionsenheden. Layoutet nedenfor deler rummet i tre lige bredde kolonner og to lige højder rækker.
Den tilhørende HTML er lavet af seks divs markeret med .boks klasse, inde i a .indpakning div.
1.2.3.4.5.6.
For at bruge modulet Gitterlayout skal du tilføje display: gitter; CSS ejendom til omslaget. Det grid-skabelon-søjler ejendom bruger fr enhed som værdi det forholdet mellem de tre kolonner er 1: 1: 1.
For gitterrækkerne (grid-template-rækker ejendom), jeg brugte ikke fr enhed, da det kun giver mening, hvis omslaget har en fast højde. Ellers kan det have mærkelige resultater på nogle enheder, dog selv da fr enhed opretholder forholdet (og dette er enormt).
Det grid-kløften ejendom tilføjer et 10 px gitter mellem kasserne. Hvis du ikke vil have noget hul, skal du bare fjerne denne ejendom.
.wrapper display: gitter; Gitter-skabelon-søjler: 1fr 1fr 1fr; Gitter-skabelon-rækker: 200px 200px; Gittergap: 10px; .box farve: hvid; tekst-align: center; Skriftstørrelse: 30px; polstring: 25px;
Bemærk, at CSS ovenfor ikke indeholder nogle grundlæggende styling såsom baggrundsfarver. Du kan find den fulde kode i demoen i slutningen af artiklen.
Skift forhold
Selvfølgelig kan du ikke kun bruge 1: 1: 1 men ethvert forhold, du ønsker. Nedenfor brugte jeg 1: 2: 1 fraktioner der deler også rummet ind i tre kolonner men den midterste kolonne bliver dobbelt så bredt som de to andre.
Jeg øgede også værdien af grid-kløften så du kan se, hvordan det ændrer layoutet. Dybest set er browseren trækker gridafstanden fra visningsbredden (i dette eksempel tilføjer gittergabene op til 80px), og skiver op resten i henhold til de givne fraktioner.
.wrapper display: gitter; gitter-skabelon-kolonner: 1fr 2fr 1fr; Gitter-skabelon-rækker: 200px 200px; Gittergab: 40px;
Forene fr med andre CSS enheder
Du kan forene det fr enhed med andre CSS enheder såvel. I eksemplet nedenfor brugte jeg f.eks 60% 1fr 2fr forholdet til mit net.
Så, hvordan virker dette? Det browser tildeler 60% af visningsbredden til den første kolonne. Derefter adskiller den resten af rummet i 1: 2 fraktioner.
Det samme kan også skrives som 60% 13.33333% 26.66667%. Men ærligt, hvorfor vil nogen gerne bruge det format? En stor fordel ved fraktion enhed er det forbedrer kode læsbarhed. Desuden er det helt præcis, da procentdel format stadig tilføjer kun til 99,9999%.
.wrapper display: gitter; Gitter-skabelon-søjler: 60% 1fr 2fr; Gitter-skabelon-rækker: 200px 200px; Gittergap: 10px;
Bortset fra procentsatser, Du kan også bruge andre CSS-enheder sammen med fraktionenheden, for eksempel pt, px, em, og rem.
Tilføj whitespace med fr
Hvad hvis du ikke vil have dit design til at være rodet og Tilføj noget hvide rum til dit net? Fraktionsenheden har også en nem løsning til det.
Som du kan se, dette net har en tom kolonne mens det stadig bevarer alle de seks bokse. Til dette layout skal vi skære rummet op ind i fire kolonner i stedet for tre. Så bruger vi 1fr 1fr 1fr 1fr værdi for grid-skabelon-søjler ejendom.
Vi tilføjer den tomme kolonne inde i grid-skabelon-områder ejendom ved hjælp af punkt notation. I grund og grund giver denne ejendom dig mulighed for referencenavnet gridarealer. Og du kan nævne gridarealer med grid-område ejendom, du skal bruge separat for hvert område.
.wrapper display: gitter; gitter-skabelon-søjler: 1fr 1fr 1fr 1fr; Gitter-skabelon-rækker: 200px 200px; Gittergap: 10px; gitter-template-områder: "box-1 box-2. box-3" "box-4 box-5. box-6"; .box-1 gitterområde: box-1; .box-2 gitter-område: box-2; .box-3 gitter-område: box-3; .box-4 gitterområde: box-4; .box-5 gitter-område: box-5; .box-6 gitter-område: box-6;
De hvide rumområder behøver ikke nødvendigvis at danne en kolonne, de kan være overalt i gitteret.
Det gentage() fungere
Du kan også bruge fr enhed sammen med gentage() fungere for a enklere syntax. , Dette er ikke nødvendigt, hvis du kun har et simpelt gitter, men kan komme i brug, når du vil gennemføre et kompliceret layout, for eksempel a nestet gitter.
.wrapper display: gitter; Gitter-skabelon-kolonner: Gentag (3, 1fr); / * gitter-skabelon-søjler: 1fr 1fr 1fr; * / gitter-skabelon-rækker: 200px; Gittergap: 10px;
Det gentag (3, 1fr) syntaks resulterer i samme layout som 1fr 1fr 1fr. Layoutet nedenfor er det samme som det første eksempel.
hvis du øge multiplikatoren inde i gentage() funktion vil du have flere kolonner. For eksempel, gentag (6, 1fr) resulterer i seks lige søjler. I dette tilfælde er alle vores kasser vil være i samme række, hvilket betyder, at det er nok at bruge kun en værdi (200px) for grid-template-rækker ejendom.
.wrapper display: gitter; Gitter-skabelon-kolonner: Gentag (6, 1fr); Gitter-skabelon-rækker: 200px; Gittergap: 10px;
Du kan bruge gentage() mere end en gang. Eksempelvis resulterer følgende eksempel i et gitter, hvori de sidste tre kolonner er dobbelt så bredt som de tre første.
.wrapper display: gitter; Gitter-skabelon-kolonner: Gentag (3, 1fr) Gentag (3, 2fr); Gitter-skabelon-rækker: 200px; Gittergap: 10px;
Du kan også forene gentage() med andre CSS enheder. For eksempel kan du bruge 200px gentagelse (4, 1fr) 200px som en gyldig kode.
Hvis du er interesseret i hvordan skabe komplekse layouter med CSS Grid-modulet, gentage() funktion og fr Enhed Rachel Andrew har et interessant blogpost om, hvordan du kan gøre det.
En demo til eksperimentering
Langt om længe, her er den demo jeg lovede. Det bruger den samme kode som det første eksempel i denne artikel. Gaffel det og se hvad du kan opnå med fr enhed.
