Дізнайтеся, як властивості сітки CSS працюють з Griddy.io

Якщо ви не відстаєте від технології веб-дизайну, ви повинні знати про сітки CSS. Ці властивості є нові додатки до формату CSS3 і вони швидко стають кращим другом розробника.

Нещодавно ми охопили цікаву гру, щоб допомогти вам дізнатися про властивості сітки CSS, але ігри не завжди навчають практичних ідей. Ось де Гридді може бути більш корисним.

Цей безкоштовний webapp дозволяє налаштувати сітки в режимі реального часу та оновлювати фрагменти на сторінці. Ви можете зіткнутися зі своєю власною сіткою, визначивши стовпці, жолоби та поля та реструктуризуйте сторінку, щоб дізнатися, як працюють властивості сітки.

Griddy насправді a безкоштовний інструмент навчання для розробників інтерфейсів хто хоче зрозуміти більше про сітки CSS.

За допомогою цього webapp можна додавати нові елементи до сітки, видаляти інші елементи та змінювати їх розмір, щоб відповідати будь-якому бажаному макету.

Webapp має різні розділи з різними полями введення для редагування властивостей сітки. Вони дозволяють переформатувати рядки / стовпці сітки, і вони навчать вас саме те, що ви робите по дорозі.

Ви можете визначити прогалини стовпців, вирівняти елементи сітки та відтворити налаштування вирівнювання - через ці поля форми. Щоразу, коли ви робите зміни, він автоматично оновить попередній перегляд і невеликий фрагмент коду під ним.

Таким чином, ви можете просто скопіювати та вставити CSS у власну таблицю стилів, якщо ви хочете ще більше зіткнутися з нею. Дуже здорово!

Griddy не може бути таким веселим, як Grid Garden, але Griddy - це практичний спосіб вчитися візуально зрозуміти як властивості сітки CSS впливають на елементи сторінки.

Щоб зіграти з ним, просто відвідайте домашню сторінку Griddy. Ви також можете поділитися своїми думками або питаннями з творцем на Twitter @drewisthe.