Zistite, ako fungujú funkcie Grid Grid CSS s Griddy.io

Ak budete držať krok s web design tech potom by ste mali vedieť o CSS siete. Tieto vlastnosti sú nové doplnky do formátu CSS3 a rýchlo sa stávajú najlepšími priateľmi pre vývojárov.

Nedávno sme zakryl zábavnú hru, ktorá vám pomôže naučiť sa vlastností siete CSS, ale hry nie vždy učí praktické nápady. Tam môže byť Griddy užitočnejšie.

Tento bezplatný webapp vám umožňuje prispôsobiť mriežky v reálnom čase a aktualizovať útržky na stránke. Svoju vlastnú sieť môžete vyriešiť definovaním stĺpcov, odkvapov a okrajov a reštrukturalizáciou stránky, aby ste zistili, ako fungujú mriežkové vlastnosti.

Griddy je vlastne free learning tool pre vývojárov frontend ktorí chcú viac pochopiť o sieťach CSS.

Pomocou tejto webovej aplikácie môžete do mriežky pridať nové položky, odstrániť ďalšie položky a zmeniť ich veľkosť tak, aby zodpovedali ľubovoľnému rozloženiu, ktoré chcete.

Webapp obsahuje rôzne sekcie s rôznymi vstupnými poliami na úpravu vlastností mriežky. Tieto vám umožňujú preformátovať riadky / stĺpce siete a učia vás presne to, čo robíte pozdĺž cesty.

Môžete definovať medzery medzi políčkami, zosúladiť položky mriežky a hrať s nastaveniami ospravedlnenia - to všetko cez tieto polia formulára. Vždy, keď vykonáte zmenu, automaticky sa aktualizuje náhľad a útržok malého kódu pod ním.

Týmto spôsobom môžete jednoducho skopírovať a vložiť CSS do vlastného šablóny so štýlmi, ak si to chcete ďalej rozdeliť. Celkom v pohode!

Griddy nemusí byť tak zábavné ako Grid Garden, ale Griddy je praktický spôsob, ako sa učiť vizuálne pochopiť ako vlastností mriežky CSS ovplyvňujú prvky stránky.

Ak chcete hrať s ním, navštívte domovskú stránku Griddy. Môžete tiež zdieľať svoje myšlienky alebo otázky s tvorcom na Twitter @ drewisthe.