Недавно мы описали забавную игру, которая поможет вам изучить свойства сетки CSS, но игры не всегда учат практическому применению. В этом случае Griddy может быть более полезным.
Это бесплатное веб-приложение позволяет настраивать сетки в режиме реального времени и обновлять текущие фрагменты на странице. Вы можете создать свою собственную сетку, определить столбцы, строки и поля, а также реструктурировать страницу, чтобы узнать, как работают свойства сетки.
Griddy - это бесплатный инструмент для обучения, созданный для разработчиков, которые хотят больше узнать о CSS-сетках.
С помощью этого веб-приложения вы можете добавлять новые элементы в сетку, удалять существующие элементы и изменять их размер в соответствии с любым макетом.
Веб-приложение имеет несколько разделов с различными полями для ввода и редактирования свойств сетки. Они позволяют вам переформатировать строки / столбцы сетки и научат вас получать тот результат, который вы ожидаете.
Вы можете указать пробелы в столбцах, выравнивать элементы сетки и «играть» с настройками выравнивания - все через эти поля формы. Всякий раз, когда вы вносите изменения, они автоматически обновляют внешний вид и код, представленный внизу страницы.
Таким образом, вы можете просто скопировать и вставить CSS в вашу собственную таблицу стилей, если вы хотите еще больше поработать с ней. Довольно круто!
Griddy может быть не таким интересным, как Grid Garden, но это практический способ узнать и визуально понять, как свойства сетки CSS влияют на элементы страницы.
Чтобы попробовать этот инструмент просто посетите домашнюю страницу Griddy. Вы также можете поделиться своими мыслями или вопросами с создателем в Twitter @drewisthe.
Оригинал статьи: Learn How CSS Grid Properties Work With Griddy.io
Автор статьи: Jake Rocheleau
Перевод: Земсков Матвей