Naučte se, jak CSS Grid Vlastnosti pracují s Griddy.io

Pokud budete držet krok s web design tech pak byste měli vědět o CSS mřížky. Tyto vlastnosti jsou nové dodatky do formátu CSS3 a rychle se stávají nejlepším přítelem developera.

Nedávno jsme si zahráli zábavnou hru, která vám pomůže naučit se vlastnosti CSS sítě, ale hry ne vždy učí praktické nápady. Tam by mohl být Griddy užitečnější.

Tento bezplatný webapp vám umožní přizpůsobit mřížky v reálném čase a aktualizovat živé úryvky na stránce. Můžete definovat sloupce, okapy a okraje a změnit strukturu stránek tak, aby se dozvěděla, jak fungují vlastnosti mřížky..

Griddy je vlastně zdarma vzdělávací nástroj pro vývojáře frontendu kteří chtějí více porozumět CSS mřížkám.

S tímto webappem můžete do mřížky přidávat nové položky, odstraňovat další položky a měnit jejich velikost tak, aby se vešly do libovolného rozložení.

Webapp má různé sekce s různými vstupními poli pro editaci vlastností mřížky. Ty vám umožní přeformátovat řádky / sloupce mřížky a naučí vás přesně to, co děláte při cestě.

Můžete definovat mezery sloupců, zarovnat položky mřížky a hrát s nastavením zarovnání - to vše prostřednictvím těchto polí formuláře. Kdykoliv provedete změnu, automaticky se aktualizuje náhled a malý fragment kódu pod ním.

Tímto způsobem si můžete jen zkopírovat a vložit CSS do svého vlastního stylu, pokud se s ním chcete dále zabývat. Dost dobrý!

Griddy nemusí být tak zábavná jako Grid Garden, ale Griddy je praktický způsob, jak se učit a vizuálně pochopit jak vlastnosti mřížky CSS ovlivňují prvky stránky.

Chcete-li si s ním hrát, navštivte domovskou stránku Griddy. Můžete také sdílet své myšlenky nebo otázky s tvůrcem na Twitteru @ drewisthe.