Vytvorte jednoduché rozloženie jednoducho pomocou systému Gridlex CSS Grid
Vývoj frontend sa radikálne zlepšil zavedením CSS flexbox. To umožňuje oveľa jednoduchšie vytvárať mriežky a stĺpce ktoré sa prirodzene posunú k odpovedajúcim usporiadaniam.
Namiesto kódovania vlastnej siete Flexbox od začiatku je oveľa jednoduchšie používať nástroj, ako napríklad Gridlex. Táto bezplatná openbox knižnica flexbox je super-ľahké a veľmi ľahko prispôsobiť.
Všetko, čo robíte, je pridajte štýl Gridlex na svoju webovú stránku a pracovať s triedami siete. Vnútorné stĺpce majú triedu .col a ty všetko zabalíš do vnútra .mriežka kontajner. Definuje každý stĺpec na rovnakej šírke a vytvorí jednotné rozhranie.
Toto predvolené nastavenie môžu byť potlačené pridaním triedy dimenzovania do každého stĺpca. Týmto spôsobom môžete mať jeden stĺpec so šírkou 70% a ďalší stĺpec so šírkou 30% (napríklad obsah / postranný panel).
Nájdete tu veľa ton vzorky mriežky na domovskej stránke Gridlex s živé ukážky a fragmenty kódu skopírovať / prilepiť na svoje stránky. Je to obrovská knižnica s mnohými voliteľné triedy ktoré vám pomôžu vybudovať najjednoduchšie siete pre všetky webové stránky.
Všetky gridy sa pridajú až do celkom 12 mini-stĺpcov, takže môžete určiť, koľko miesta má každý stĺpec zaujať. Môže sa to zdať mätúce, ale má zmysel, keď uvidíte vizuálne dema.
Tu je a príklad kódu používa sa pre väčšiu mriežku s rôznymi šírkami:
.........
Všimnite si, že .mriežka trieda obsahuje všetko a pokus o stĺpce rozdelená na 12 častí (v príklade by to bola ⅓ šírka pre každého). Avšak pevné stĺpce rozpätie 2 a 6 stĺpcov resp. prvý stĺpec používa automatickú šírku založené na tom, čo zostalo.
Použitím ďalších dvoch stĺpcov môžeme vyvodiť, že tam budú 4 stĺpce (12-6-2) hit celkom 12. Je to všetko veľmi jednoduchá matematika, ale názvy triedy môžu byť mätúce. Akonáhle začnete hrať s projektom Gridlex, rýchlo vyzdvihnite názov systému.
Gridlex je momentálne vo verzii 2.x a jeho neustále sa aktualizuje na GitHub. Vzhľadom na to, že podpora prehliadača narastá, zaručujem väčšiu pozornosť v súvislosti s flexboxom, pričom viac stránok tento model používa na vytváranie webových stránok.
Môžete dokonca nájsť a kompletná galéria webových stránok so systémom Gridlex, aby ste zistili, ako to vyzerá pri použití na živé webové stránky.
Ak ste predtým nikdy nepoužili flexbox, potom môže byť Gridlex zábavnou knižnicou. Odporúčame vám však, aby ste najprv používali zábavné hry flexbox, aby ste otestovali svoje vedomosti a pomohli vám pochopiť základy.
Gridlex je k dispozícii bezplatne v repo GitHub alebo ho môžete vytiahnuť cez npm alebo bower. Ponúka kompletnú dokumentáciu na hlavnej stránke, vrátane ukážok pre stĺpce s rôznou šírkou a mediálnych dopytov.
Máš plná kontrola cez Flexbox dizajn a to len trvá niekoľko tried CSS aby sa to stalo! A ak máte niekedy rýchlu otázku alebo chcete zdieľať stránky, ktoré ste vytvorili pomocou Gridlexu, môžete poslať správu o tvorcovi na Twitteri @webdevlint.
