Матвей Земсков

Заметки веб-мастера

Воскресенье, 28 июня 2020 19:17

Изучаем свойства CSS Grid с Griddy.io

Оцените материал
(2 голосов)

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

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

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

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

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

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

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

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

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

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

Оригинал статьи: Learn How CSS Grid Properties Work With Griddy.io

Автор статьи: Jake Rocheleau

Перевод: Земсков Матвей

Прочитано 3970 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх