CSS Grid с нуля ➤ Что такое CSS Grid?

Показать описание

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

Что такое CSS Grid? Это удобный механизм для настройки расположения элементов на странице, использующий принцип сети или таблицы со строками и столбцами. Навыки использования CSS Grid во время верстки сайта важны для любого современного фронтенд разработчика.

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

Курс “CSS Grid с нуля” подойдет тем, кто уже имеет базовые знания HTML и CSS, хочет познакомиться с CSS Grid, и изучить основы работы этой технологии для уверенного использования ее на практике.

Чему вы научитесь на курсе:

Использовать CSS Grid при выполнении верстки ваших веб страниц.
Использовать Figma для построения шаблонов для дальнейшей работы.
Создавать свои стили.
Понимать особенности и уметь применять Grid colums (столбцы) и Grid rows (строки).
Понимать и применять на практике возможности объединения ячеек и именования линий.
Применять функцию repeat.
Применять grid-template-areas и разбивать грид на grid-areas.
Выравнивать ячейки грида с помощью правил justify-items и align-items.
Выравнивать контент в ячейках.
Использовать значения max-content и min-content.
Упорядочивать элементы и управлять отображением элементов в блоке.
Ограничивать области перемещения блоков с абсолютным позиционированием.
Использовать свойства flex и grid.
Уметь преобразовывать флекс блоки в грид.
Понимать автосвойства грид, и уметь контролировать построение грида.
Уметь совмещать медиа запросы и правила грид блоков.
Использовать медиа запросы для гибкой трансформации грид лейаута.
Создавать готовый сверстанный проект и деплоить его на github.

Если Вы хотите изучить CSS Grid с нуля, Вас интересуют Grid CSS основы, уроки Grid, уроки грид, а также другие технологии верстки сайтов: FlexBox, адаптивная верстка, верстка под мобильные устройства, противопоставление Grid CSS vs Flexbox — множество полезных материалов вы сможете найти на сайте ITVDN.

#CSS #Grid