Dowiedz się, jak właściwości siatki CSS działają z Griddy.io
Jeśli nadążasz za technikami projektowania stron internetowych, powinieneś wiedzieć o siatkach CSS. Te właściwości są nowe dodatki do formatu CSS3 i szybko stają się najlepszym przyjacielem dewelopera.
Niedawno przedstawiliśmy zabawną grę, która pomoże ci poznać właściwości siatki CSS, ale gry nie zawsze uczą praktycznych pomysłów. To tam Griddy może być bardziej przydatny.
Ta bezpłatna aplikacja internetowa pozwala dostosuj siatki w czasie rzeczywistym i aktualizuj fragmenty na żywo na stronie. Możesz zepsuć własną niestandardową siatkę, definiując kolumny, rynny i marginesy i restrukturyzując stronę, aby dowiedzieć się, jak działają właściwości siatki.
Griddy jest właściwie bezpłatne narzędzie do nauki stworzone dla programistów frontendowych którzy chcą dowiedzieć się więcej o siatkach CSS.
Dzięki tej aplikacji możesz dodawać nowe elementy do siatki, usuwać inne elementy i zmieniać ich rozmiar, aby pasowały do dowolnego układu.
Aplikacja internetowa ma różne sekcje z różnymi polami wejściowymi do edycji właściwości siatki. Umożliwiają one ponowne sformatowanie wierszy / kolumn siatki i uczą cię dokładnie to, co robisz po drodze.
Możesz zdefiniować luki kolumn, wyrównać elementy siatki i grać z ustawieniami justowania - wszystko w tych polach formularza. Za każdym razem, gdy dokonasz zmiany, automatycznie zaktualizuje podgląd i pod nim mały fragment kodu.
W ten sposób możesz po prostu skopiować i wkleić CSS do własnego arkusza stylów, jeśli chcesz zepsuć go dalej. Całkiem fajne!
Griddy może nie być tak zabawne jak Grid Garden, ale Griddy to praktyczny sposób na naukę i wizualnie zrozumieć jak właściwości siatki CSS wpływają na elementy strony.
Aby się nim bawić, wystarczy odwiedzić stronę główną Griddy. Możesz także podzielić się swoimi przemyśleniami lub pytaniami z twórcą na Twitterze @drewisthe.
