Научете как CSS Grid Properties работят с Griddy.io

Ако поддържате технологиите за уеб дизайн, тогава трябва да знаете за CSS мрежите. Тези свойства са нови допълнения към CSS3 формата и бързо се превръщат в най-добрия приятел на разработчика.

Наскоро ние разгледахме забавна игра, за да ви помогнем да научите свойствата на CSS мрежата, но игрите не винаги преподават практически идеи. Това е мястото, където Griddy може да бъде по-полезен.

Този безплатен webapp ви позволява персонализирайте мрежите в реално време и актуализирате репортажи на страницата. Можете да се забърквате със собствената си персонализирана мрежа, като дефинирате колони, олуци и полета и преструктурирайте страницата, за да научите как работят свойствата на мрежата.

Griddy всъщност е a Безплатни \ tбезплатен инструмент за обучение, направени за разработчиците на интерфейси които искат да разберат повече за CSS мрежите.

С този webapp можете да добавяте нови елементи в мрежата, да премахвате други елементи и да ги преоразмерявате, за да пасват на всяко желано оформление.

Webapp има различни секции с различни входни полета за редактиране на свойствата на решетката. Те ви позволяват да преформатирате редовете / колоните на мрежата и те ви учат точно това, което правите по пътя.

Можете да дефинирате пропуски в колоните, да подравнявате елементи от мрежата и да играете с настройки за обосновка - през тези полета за формуляри. Когато правите промяна, тя автоматично ще актуализира визуализацията и малкия кодов фрагмент отдолу.

По този начин можете просто да копирате и поставите CSS в собствения си стилов лист, ако искате да се забъркате с него по-нататък. Много готино!

Griddy може да не е толкова забавно, колкото Grid Garden, но Griddy е практичен начин да се учи и визуално разбирам как свойствата на CSS решетката засягат елементите на страницата.

За да си поиграете с нея, просто посетете началната страница на Griddy. Можете също така да споделите вашите мисли или въпроси с създателя на Twitter @drewisthe.