Sprievodca rozložením siete CSS od Fr
Modul rozloženia siete CSS bola odoslaná s nová jednotka CSS tzv fr jednotka. Ako jednoduché, ako to môže byť, fr je skratka slova “zlomok”. Nová jednotka umožňuje rýchle rozdelenie mriežky do proporcionálnych stĺpcov alebo riadkov. Výsledkom je vytvorenie plne reagujúce a flexibilné siete stáva takmer vánok.
Keďže frakčná jednotka bola zavedená spolu s modulom Grid Layout, môžete ho použiť v ľubovoľnom prehliadači podporuje sieť CSS. Ak chcete podporovať aj staršie prehliadače, tu je skvelé CSS grid polyfill ktorý vám umožňuje používať nielen fr ale aj iné funkcie siete.
Základné využitie
Po prvé, poďme sa pozrieť na a základná sieť ktorý používa frakčnú jednotku. Usporiadanie nižšie rozdeľuje priestor do tri stĺpce s rovnakou šírkou a dva riadky s rovnakou výškou.
Patria sem príslušný HTML šesť divov označené symbolom .box trieda, vnútri a .obálka div.
1.2.3.4.5.6.
Ak chcete použiť modul Rozloženie siete, musíte ho pridať zobrazenie: mriežka; Vlastnosť CSS do obalu. grid-Template-stĺpca nehnuteľnosť používa fr jednotku ako hodnotu; pomer troch stĺpcov je 1: 1: 1.
Pre riadky mriežky (grid-Template-riadky majetok), nepoužil som fr jednotka, pretože to má zmysel iba v prípade obalu má pevnú výšku. V opačnom prípade to môže mať na niektoré zariadenia zvláštne výsledky, avšak aj potom fr jednotka udržiava pomer (a to je obrovské).
grid-medzera vlastnosť pridá 10px mriežku medzi políčkami. Ak nechcete, aby sa táto vlastnosť odstránila iba medzera.
.obal zobrazenie: mriežka; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 200px 200px; mriežka: 10px; .box farba: biela; text-align: center; veľkosť písma: 30px; polstrovanie: 25px;
Všimnite si, že CSS neobsahuje niektoré základné štýly, ako sú farby pozadia. Môžeš nájdite úplný kód v demo na konci článku.
Pomer zmeny
Samozrejme, môžete použiť nielen 1: 1: 1, ale akýkoľvek požadovaný pomer. Nižšie som použil Frakcie 1: 2: 1 ktoré tiež rozdeľujú priestor tri stĺpce ale stredný stĺpec bude dvakrát tak široký ako ostatné dva.
Zvýšil som tiež hodnotu grid-medzera aby ste mohli vidieť, ako zmena rozloženia. V podstate je to prehliadač odčíta mriežku od šírky zobrazenia (v tomto príklade medzery v mriežke tvoria až 80 pixlov) a rozdelí zvyšok podľa daných zlomkov.
.obal zobrazenie: mriežka; mriežka-šablóna-stĺpce: 1fr 2fr 1fr; grid-template-rows: 200px 200px; mriežka: 40px;
kombinovať fr s inými jednotkami CSS
Môžeš kombinovať fr jednotka s akékoľvek iné jednotky CSS tiež. Napríklad v nižšie uvedenom príklade som použil 60% 1fr 2fr pomer pre moju mriežku.
Ako to funguje? prehliadač priradí 60% šírky zobrazenia do prvého stĺpca. Potom rozdeľuje zvyšok priestoru na frakcie 1: 2.
Tá istá vec by mohla byť napísaná aj ako 60% 13.33333% 26.66667%. Ale úprimne povedané, prečo by chce niekto použiť tento formát? Obrovskou výhodou frakčnej jednotky je, že je to zlepšuje čitateľnosť kódu. Navyše je to úplne presné, pretože percentuálny formát stále vzrástol iba na 99,9999%.
.obal zobrazenie: mriežka; šablóna šablóny-stĺpcov: 60% 1fr 2fr; grid-template-rows: 200px 200px; mriežka: 10px;
Okrem percentuálneho podielu, môžete použiť aj iné jednotky CSS spolu s jednotkou frakcie, napríklad pt, px, em, a rem.
Pridajte medzery s fr
Čo ak nechcete, aby váš návrh bol preplnený a pridajte niektoré medzery do vašej siete? Jednotka zlomkov má tiež jednoduché riešenie.
Ako vidíte, táto mriežka má prázdny stĺpec zatiaľ čo si zachová všetky šesť krabičiek. Pre toto rozloženie musíme priestor rozdeliť do štyroch stĺpcov namiesto troch. Takže používame 1fr 1fr 1fr 1fr hodnota pre grid-Template-stĺpca vlastnosť.
Do prázdneho stĺpca pridáme prázdny stĺpec grid-template-oblasti nehnuteľnosť, pomocou bodová notácia. V podstate vám táto vlastnosť umožňuje referenčných názvov oblastí mriežky. Môžete tiež pomenovať oblasti mriežky pomocou grid-area majetok, ktorý potrebujete použiť samostatne pre každú oblasť.
.obal zobrazenie: mriežka; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 200px 200px; mriežka: 10px; Oblasti šablóny: "box-1 box-2" box-3 "" box-4 box-5 box-6 "; .box-1 mriežka: box-1; .box-2 mriežka: box-2; .box-3 mriežka: box-3; .box-4 mriežka: box-4; .box-5 mriežka: box-5; .box-6 mriežka: box-6;
Oblasti medzery nemusia nevyhnutne tvoriť stĺpec, oni môže byť kdekoľvek v mriežke.
opakovať () funkcie
Môžete tiež použiť fr jednotka spolu s opakovať () funkcie pre jednoduchšia syntax. , to nie je potrebné, ak máte iba jednoduchú sieť, ale môžete sa hodiť, keď chcete implementovať zložité usporiadanie, napríklad a vnorená mriežka.
.obal zobrazenie: mriežka; mriežka-šablóna-stĺpce: opakovanie (3, 1fr); / * mriežka-šablóna-stĺpce: 1fr 1fr 1fr; * / grid-template-riadky: 200px; mriežka: 10px;
opakovanie (3, 1fr) syntax má rovnaké rozloženie ako 1fr 1fr 1fr. Nasledujúci rozvrh je rovnaký ako prvý príklad.
Ak ty zvýšiť multiplikátor vnútri opakovať () funkcie budete mať viac stĺpcov. Napríklad, opakujte (6, 1fr) výsledky v šesť rovnakých stĺpcov. V tomto prípade všetky naše polia bude v rovnakom riadku, čo znamená, že stačí použiť iba jednu hodnotu (200 pixlov) pre grid-Template-riadky vlastnosť.
.obal zobrazenie: mriežka; šablóna šablóny-stĺpce: opakovanie (6, 1fr); grid-template-riadky: 200px; mriežka: 10px;
Môžeš použiť opakovať () viac než raz. Napríklad nasledujúci príklad má za následok mriežku, v ktorej sú posledné tri stĺpce dvakrát tak široký ako prvé tri.
.obal zobrazenie: mriežka; šablóna šablóny-stĺpce: opakovanie (3, 1fr) opakovanie (3, 2fr); grid-template-riadky: 200px; mriežka: 10px;
Môžete tiež kombinovať opakovať () s inými jednotkami CSS. Môžete napríklad použiť 200px opakovanie (4, 1fr) 200px ako platný kód.
Ak máte záujem o to, ako vytvárať komplexné rozloženia pomocou modulu CSS Grid, opakovať () funkcia a fr jednotka Rachel Andrew má zaujímavý blogový príspevok o tom, ako to urobiť.
Demo na experimentovanie
konečne, tu je demo, ktoré som sľúbil. Používa rovnaký kód ako prvý príklad v tomto článku. Zaveďte ho a uvidíte, čo môžete dosiahnuť fr jednotka.
