Узнайте, как свойства CSS Grid работают с Griddy.io

Если вы следите за технологиями веб-дизайна, вы должны знать о CSS-сетках. Эти свойства новые дополнения в формате CSS3 и они быстро становятся лучшим другом разработчика.

Недавно мы описали забавную игру, которая поможет вам изучить свойства CSS-сетки, но игры не всегда учат практическим идеям. Вот где Гридди может быть более полезным.

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

Гридди на самом деле бесплатный инструмент обучения, созданный для разработчиков веб-интерфейса кто хочет больше узнать о CSS сетках.

С помощью этого веб-приложения вы можете добавлять новые элементы в сетку, удалять другие элементы и изменять их размер в соответствии с любым макетом..

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

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

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

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

Чтобы поиграть с этим, просто посетите домашнюю страницу Griddy. Вы также можете поделиться своими мыслями или вопросами с создателем в Twitter @drewisthe.