Priročnik za enoto za razporeditev mrežnih povezav CSS
The Modul za postavitev mreže CSS je bilo dobavljeno z a nove enote CSS se imenuje fr enoto. Tako enostavno, kot je mogoče, fr ali je okrajšava besede “ulomek”. Nova enota omogoča hitro rezanje mreže v proporcionalne stolpce ali vrstice. Kot rezultat, ustvarjanje popolnoma prilagodljive in prilagodljive mreže postane skoraj vetrič.
Ker je bila frakcijska enota predstavljena skupaj z modulom Grid Layout, jo lahko uporabite v kateremkoli brskalniku podpira mrežo CSS. Če želite podpirati tudi starejše brskalnike, je tu odlična rešitev CSS mrežna polifila ki vam omogoča uporabo ne le fr enote, ampak tudi druge lastnosti omrežja.
Osnovna uporaba
Najprej si poglejmo a osnovno omrežje ki uporablja enoto za frakcijo. Postavitev spodaj deli prostor na treh stolpcev enake širine in dve vrstici enake višine.
Pripadajoči HTML je sestavljen iz šest divov označeno z .škatla razred, znotraj .ovoj div.
1.2.3.4.5.6.
Če želite uporabiti modul Grid Layout, morate dodati prikaz: mreža; Lastnost CSS za ovoj. The grid-template-stolpci lastnost uporablja fr enota kot vrednost; razmerje treh stolpcev je 1: 1: 1.
Za mrežne vrstice (grid-template-vrstice premoženja), nisem uporabil fr enota, saj je smiselna le, če je ovoj ima določeno višino. V nasprotnem primeru lahko ima na nekaterih napravah nenavadne rezultate, čeprav tudi fr enoto ohranja razmerje (in to je ogromno).
The vrzel v mreži nepremičnine doda mrežo 10 px med škatle. Če ne želite nobene vrzeli, odstranite to lastnino.
.ovoj [prikaz: mreža; grid-template-column: 1fr 1fr 1fr; grid-predloge-predloge: 200px 200px; vrzel v mreži: 10px; .box barva: bela; text-align: center; velikost pisave: 30px; oblazinjenje: 25px;
Upoštevajte, da zgornji CSS ne vsebuje nekaterih osnovnih stilov, kot so barve ozadja. Ti lahko najdete celotno kodo v predstavitvi na koncu članka.
Razmerje sprememb
Seveda ne morete uporabljati samo 1: 1: 1, ampak poljubno razmerje. Spodaj sem 1: 2: 1 frakcije ki prav tako delijo prostor na tri stolpce ampak srednji stolpec bo dvakrat širši kot druga dva.
Povečal sem tudi vrednost vrzel v mreži tako da lahko vidite, kako spremeni postavitev. V bistvu, brskalnik odšteje vrzel mreže od širine prikaza (v tem primeru se vrzeli v mreži dodajo do 80 pikslov) in ostale rezine glede na dane deleže.
.ovoj [prikaz: mreža; grid-template-column: 1fr 2fr 1fr; grid-predloge-predloge: 200px 200px; vrzel v mreži: 40px;
Združite fr z drugimi enotami CSS
Ti lahko kombinirati fr enota z druge enote CSS prav tako. Na primer, v spodnjem primeru sem uporabil 60% 1fr 2fr razmerje za mojo mrežo.
Torej, kako to deluje? The brskalnik dodeli 60% širine prikaza v prvi stolpec. Nato razdeli preostali del prostora na 1: 2.
Enako bi lahko zapisali tudi kot 60% 13.33333% 26.66667%. Ampak odkrito povedano, zakaj bi kdo želel uporabiti to obliko? Velika prednost enote za frakcije je ta izboljša berljivost kode. Poleg tega je popolnoma natančno, kot odstotek še vedno znaša samo 99,9999%.
.ovoj [prikaz: mreža; grid-template-column: 60% 1fr 2fr; grid-predloge-predloge: 200px 200px; vrzel v mreži: 10px;
Razen odstotkov, lahko uporabite tudi druge enote CSS skupaj z enoto za frakcije, na primer pt, px, em, in rem.
Dodajte presledke z fr
Kaj pa, če ne želite, da bi bila vaša zasnova nered in dodajte nekaj presledkov do vaše mreže? Enota za frakcije ima tudi preprosto rešitev.
Kot lahko vidite, ta mreža ima prazen stolpec medtem ko še vedno ohranja vseh šest škatel. Za to postavitev moramo razmakniti prostor navzgor v štirih stolpcih namesto treh. Torej, uporabljamo 1fr 1fr 1fr 1fr vrednost za. \ t grid-template-stolpci nepremičnine.
V polje dodamo prazen stolpec omrežja-predloge lastnost, z uporabo pika notacija. V bistvu vam ta lastnost omogoča referenčna imenovana območja mreže. Lahko pa poimenujete mrežna območja z omrežje nepremičnine, ki jih potrebujete ločeno za vsako območje.
.ovoj [prikaz: mreža; grid-template-column: 1fr 1fr 1fr 1fr; grid-predloge-predloge: 200px 200px; vrzel v mreži: 10px; mrežna polja: "box-1 box-2. box-3" "box-4 box-5. box-6"; .box-1 grid-area: box-1; .box-2 grid-area: box-2; .box-3 grid-area: box-3; .box-4 grid-area: box-4; .box-5 grid-area: box-5; .box-6 grid-area: box-6;
Področja v presledkih ni nujno, da tvorite stolpec, oni lahko kjerkoli v omrežju.
The ponovite () funkcijo
Uporabite lahko tudi fr enoto skupaj z ponovite () funkcijo za enostavnejša sintaksa. , to ni potrebno, če imate samo preprosto omrežje, lahko pa vam pride tudi v poštev izvajati zapleteno postavitev, na primer a ugnezdena mreža.
.ovoj [prikaz: mreža; grid-template-column: repeat (3, 1fr); / * grid-template-column: 1fr 1fr 1fr; * / grid-template-vrstice: 200px; vrzel v mreži: 10px;
The ponovite (3, 1fr) skladnjo rezultatov v isti postavitvi kot 1fr 1fr 1fr. Spodnja postavitev je enaka kot pri prvem primeru.
Če ti povečanje množitelja znotraj ponovite () funkcija bo imela več stolpcev. Na primer, ponovite (6, 1fr) Rezultati v šest enakih stolpcev. V tem primeru vse naše škatle bo v isti vrstici, kar pomeni, da je za uporabo dovolj ene vrednosti (200px) grid-template-vrstice nepremičnine.
.ovoj [prikaz: mreža; grid-template-column: repeat (6, 1fr); grid-template-rows: 200px; vrzel v mreži: 10px;
Lahko uporabiš ponovite () več kot enkrat. Naslednji primer na primer prikaže mrežo, v kateri so zadnji trije stolpci dvakrat širši kot prvi trije.
.ovoj [prikaz: mreža; grid-template-column: ponovite (3, 1fr) ponovite (3, 2fr); grid-template-rows: 200px; vrzel v mreži: 10px;
Lahko tudi kombinirati ponovite () z drugimi enotami CSS. Na primer, lahko uporabite 200px ponavljanje (4, 1fr) 200px kot veljavno kodo.
Če vas zanima, kako ustvarite kompleksne postavitve z modulom CSS Grid, ponovite () in funkcijo fr enota Rachel Andrew ima zanimivo objavo na blogu o tem, kako lahko to storite.
Demo za eksperimentiranje
Končno, tukaj je demo, ki sem ga obljubil. Uporablja isto kodo kot prvi primer v tem članku. Fork it, in videli, kaj lahko dosežete z fr enoto.
