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

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Читайте также: Введение в модуль CSS Grid Layout

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

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

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

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

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

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

            <script async src="https://triu.ru/wp-content/litespeed/localres/aHR0cHM6Ly9wbGF0Zm9ybS50d2l0dGVyLmNvbS93aWRnZXRzLmpz" charset="utf-8"></script>