Vytvořte moderní rozvržení snadno pomocí Gridlex CSS Grid systému
Vývoj frontendu se radikálně zlepšil se zavedením CSS flexbox. Díky tomu je mnohem snazší vytvořit mřížky a sloupce které přirozeně posouvají citlivé rozvržení.
Namísto kódování vlastní mřížky flexbox od nuly je mnohem jednodušší použít takový nástroj, jako je Gridlex. Tato bezplatná open source knihovna flexbox je super lehký a velmi snadno přizpůsobitelné.
Jediné, co musíte udělat, je přidejte šablonu stylů Gridlex na vaši webovou stránku a pracovat s třídami mřížek. Vnitřní sloupy jsou třídy .Col a všechny tyto zabalíte dovnitř .mřížka kontejner. To definuje každý sloupec ve stejné šířce a vytváří jednotné rozhraní.
Toto výchozí nastavení mohou být přepsány přidáváním tříd velikosti do každého sloupce. Tímto způsobem můžete mít jeden sloupec o šířce 70% a další sloupec o šířce 30% (např. Obsah / postranní panel).
Najdete tu spoustu vzorků sítě na domovské stránce Gridlexu pomocí živá dema a útržky kódu zkopírovat / vložit na vaše stránky. Je to obrovská knihovna s tolika volitelné třídy vám pomohou vytvořit nejjednodušší mřížky pro všechny webové stránky.
Všechny mřížky přidávají až a celkem 12 mini-sloupců, takže můžete definovat, kolik místa má každý sloupec zabírat. To se může zdát matoucí, ale má smysl, když vidíte vizuální ukázky.
Tady je příklad kódu používá se pro větší mřížku s různými šířkami:
………
Všimněte si, že .mřížka třída obsahuje vše a sloupce se pokoušejí rozdělena na 12 částí (v příkladu to bude ⅓ šířka pro každého). Nicméně, pevné sloupce rozpětí 2 a 6 sloupců první sloupec používá automatickou šířku na základě čehokoliv.
Pomocí dalších dvou sloupců můžeme vyvodit, že by zůstaly 4 sloupce (12-6-2) celkem 12. Je to všechno velmi jednoduchá matematika, ale názvy tříd mohou být matoucí. Jakmile začnete hrát s Gridlexem na projektu, rychle si vyzvednete systém pojmenování.
Gridlex je v současné době ve verzi 2.x. a jeho neustále aktualizován na GitHub. Vzhledem k tomu, že podpora prohlížeče roste, zaručila bych větší pozornost systému flexbox, přičemž více stránek používá tento model pro mřížky stránek.
Můžete dokonce najít plná galerie webových stránek se systémem Gridlex, abyste zjistili, jak to vypadá, když je aplikován na živé webové stránky.
Pokud jste nikdy nepoužívali flexbox dříve, Gridlex může být zábavnou knihovnou, se kterou si můžete hrát. Ale také doporučuji cvičit nejprve pomocí zábavných her flexbox, abyste otestovali své znalosti a pomohli vám porozumět základům.
Gridlex je k dispozici zdarma v repozitáři GitHub nebo jej můžete vytáhnout přes npm nebo bower. To nabízí kompletní dokumentace na hlavním webu, včetně ukázek pro sloupce s proměnnou šířkou a dotazy médií.
Ty máš plná kontrola přes design flexboxu a to pouze trvá několik CSS tříd aby se to stalo! A pokud budete mít rychlou otázku nebo chcete sdílet stránky, které jste vytvořili pomocí služby Gridlex, můžete tvůrce nahlásit na Twitteru @webdevlint.
