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

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

Немного о веб-технологиях

Мой блог содержит заметки о различных веб-технологиях, как клиентских, так и серверных. Здесь будут раскрыты вопросы html-верстки, программирования на javaScript и jQuery,разработки на PHP. Не останутся без внимания популярные системы управления сайтом «1С-Битрикс», Joomla и другие. О работе с ними, я также буду писать.

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

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

Надеюсь информация будет полезна для посетителей.

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

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

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

Если вы не отстаете от современных веб-технологий, то вам следует знать о 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

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

Прочитано 68 раз
Другие материалы в этой категории:
Как создавать сложные макеты с помощью CSS-сетки

Добавить комментарий


Свежие заметки
Последние комментарии
Наверх