Průvodce pro CSS Grid Layout Fr Unit
CSS Grid Layout Module byl dodán s nové jednotky CSS nazvaný fr jednotka. Tak přímočarý jak to může být, fr je zkratka slova “zlomek”. Nová jednotka umožňuje rychle rozřezat mřížku do proporcionálních sloupců nebo řádků. Výsledkem je vytvoření plně flexibilní a flexibilní sítě se stává téměř větrem.
Jelikož byla frakční jednotka zavedena společně s modulem Grid Layout, můžete ji použít v libovolném prohlížeči podporuje CSS mřížku. Pokud chcete také podporovat starší prohlížeče, je to skvělé Polyfill CSS mřížky který vám umožní používat nejen fr jednotky, ale i jiné funkce mřížky.
Základní použití
Nejprve se podívejme na základní mřížka který používá frakční jednotku. Rozložení níže rozděluje prostor na tři sloupce se stejnou šířkou a dva řádky stejné výšky.
Příslušné HTML je vyrobeno z šest divs označené .box třída, uvnitř .obal div.
1.2.3.4.5.6.
Chcete-li použít modul Rozvržení mřížky, musíte přidat displej: mřížka; Vlastnost CSS pro wrapper. sloupce mřížkové šablony vlastnost používá fr jednotka jako hodnota; Poměr tří sloupců je 1: 1: 1.
Pro řádky mřížky (řádky šablony mřížky majetku), nepoužíval jsem fr jednotky, protože má smysl pouze v případě, že obal má pevnou výšku. V opačném případě může mít na některých zařízeních podivné výsledky, a to i tehdy fr jednotka udržuje poměr (a to je obrovské).
mezera sítě vlastnictví přidá 10px mřížku mezi poli. Pokud nechcete žádnou mezeru, odstraňte tuto vlastnost.
.wrapper display: grid; sloupce šablony mřížky: 1fr 1fr 1fr; řádky mřížkové šablony: 200px 200px; grid-gap: 10px; .box barva: bílá; zarovnání textu: střed; velikost písma: 30px; polstrování: 25x;
Všimněte si, že CSS výše neobsahuje některé základní styly, například barvy pozadí. Můžeš najít úplný kód v demu na konci článku.
Změna poměru
Samozřejmě, nemůžete použít pouze 1: 1: 1, ale jakýkoliv poměr, který chcete. Níže jsem použil 1: 2: 1 frakce které také dělí prostor na tři sloupce ale střední sloupec bude dvakrát širší jako ostatní dva.
Také jsem zvýšil hodnotu mezera sítě tak, abyste viděli, jak mění rozvržení. V podstatě prohlížeč odečte mezeru mřížky od šířky pohledu (v tomto příkladu mezery mřížky dosahují až 80x) a rozřezává zbytek podle uvedených frakcí.
.wrapper display: grid; sloupce šablony mřížky: 1fr 2fr 1fr; řádky mřížkové šablony: 200px 200px; grid-gap: 40px;
Kombajn fr s jinými jednotkami CSS
Můžeš kombajn fr jednotka s jiné jednotky CSS také. Například v příkladu níže jsem použil 60% 1fr 2fr pro mřížku.
Jak to tedy funguje? prohlížeč přiřadí 60% šířky pohledu do prvního sloupce. Poté zbytek prostoru rozdělí na zlomky 1: 2.
Totéž by mohlo být napsáno jako 60% 13.33333% 26.66667%. Ale upřímně, proč by někdo chtěl použít tento formát? Obrovskou výhodou frakční jednotky je, že je to zlepšuje čitelnost kódu. Navíc je to zcela přesné, formát procenta stále zvyšuje až na 99,9999%.
.wrapper display: grid; sloupce šablony mřížky: 60% 1fr 2fr; řádky mřížkové šablony: 200px 200px; grid-gap: 10px;
Kromě procent, můžete také použít jiné CSS jednotky například s frakční jednotkou pt, px, em, a rem.
Přidejte mezery pomocí fr
Co když nechcete, aby váš design byl přeplněný a přidat nějaké mezery do vaší mřížky? Frakční jednotka má také snadné řešení.
Jak vidíte, tato mřížka má prázdný sloupec zatímco si stále uchovává všech šest krabic. Pro toto rozvržení musíme prostor rozdělit do čtyř sloupců místo tří. Takže používáme 1fr 1fr 1fr hodnotu pro sloupce mřížkové šablony vlastnictví.
Do sloupce přidáme prázdný sloupec oblasti šablony mřížek vlastnost, pomocí bodová notace. Tato vlastnost vám v podstatě umožňuje odkazem na plochy mřížky. Oblasti mřížky můžete pojmenovat pomocí oblasti mřížky vlastnost, kterou potřebujete použít odděleně pro každou oblast.
.wrapper display: grid; sloupce šablony mřížky: 1fr 1fr 1fr 1fr; řádky mřížkové šablony: 200px 200px; grid-gap: 10px; oblasti šablon rastrů: "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;
Oblasti mezer nemusí nutně tvořit sloupec, oni může být kdekoli v mřížce.
opakovat() funkce
Můžete také použít fr jednotka společně s opakovat() funkce pro jednodušší syntaxe. , to není nutné, pokud máte jen jednoduchou mřížku, ale můžete se hodit, když chcete implementovat složité uspořádání, například a vnořená mřížka.
.wrapper display: grid; sloupce mřížkové šablony: opakování (3, 1fr); / * sloupce šablony mřížky: 1fr 1fr 1fr; * / grid-template-rows: 200px; grid-gap: 10px;
opakovat (3, 1fr) syntax výsledkem je stejné rozvržení tak jako 1fr 1fr. Rozložení níže je stejné jako první příklad.
jestli ty zvýšit násobitel uvnitř opakovat() budete mít více sloupců. Například, opakovat (6, 1fr) má za následek šest stejných sloupců. V tomto případě všechny naše krabice bude ve stejné řadě, to znamená, že stačí použít pouze jednu hodnotu (200px) pro řádky šablony mřížky vlastnictví.
.wrapper display: grid; sloupce mřížkové šablony: opakování (6, 1fr); grid-template-rows: 200px; grid-gap: 10px;
Můžeš použít opakovat() více než jednou. Následující příklad má například za následek mřížku, ve které jsou poslední tři sloupce dvakrát širší jako první tři.
.wrapper display: grid; sloupce mřížkové šablony: opakování (3, 1fr) opakování (3, 2fr); grid-template-rows: 200px; grid-gap: 10px;
Můžete také kombajn opakovat() s jinými jednotkami CSS. Můžete například použít 200px opakování (4, 1fr) 200px jako platný kód.
Máte-li zájem o to, jak vytvořit komplexní rozvržení s modulem CSS Grid opakovat() funkce a fr jednotka Rachel Andrew má zajímavý blog post o tom, jak to můžete udělat.
Demo pro experimentování
Konečně, tady je demo, které jsem slíbil. Používá stejný kód jako první příklad v tomto článku. Vidlice, a uvidíte, co můžete dosáhnout s fr jednotka.
