курс

CSS: Grid

679 студентов 134 сообщения
Курс CSS: Grid
продолжительность
5 часов
награда
35 баллов

Курс посвящён модулю CSS Grid Layout — технологичному инструменту для создания сеток в CSS. После прихода модуля Flex появилась потребность в контролировании элементов по двум осям одновременно. Разработчики хотели взять систему сеток, которая используется в печатной продукции сотню лет. Для этого использовали табличную вёрстку, вёрстку с помощью Float и Flex. Каждый из этих способов имел ограничения и сложности при разработке. CSS Grid Layout появился в 2011 году и за много лет приобрёл множество свойств и подходов, которые упрощают создание макетов с помощью CSS.

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

  • Базовым свойствам CSS Grid Layout.
  • Создавать сетки и управлять пространством внутри них.
  • Управлять расположением HTML-элементов внутри сетки.
  • Адаптировать сетки для разных разрешений экрана.
CSS3 Grid Сетки Адаптивность
Последнее обновление: 21 июня 2021

Уроки курса

  • 1

    Введение

    Познакомиться с концепцией Grid. Узнать о ключевых моментах и отличиях от Flex
  • 2

    Терминология

    Познакомиться с понятиями сеток и их составлящими в CSS Grid Layout

    тесты

  • 3

    Первая сетка

    Узнать о свойствах, позволяющие создавать сетки с помощью CSS Grid Layout. Создать первую 12 колоночную сетку. Познакомиться с единицами измерения fr

    тесты

    упражнение

  • 4

    Расположение элементов в сетке

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

    тесты

  • 5

    Работа с сеткой

    Изучить отступы между полосами и выравнивание полос сетки.

    тесты

    упражнение

  • 6

    Неявная сетка

    Узнать отличия явной и неявной сетки. Изучить свойства grid-auto-rows и grid-auto-columns

    тесты

  • 7

    Позиционирование и Grid

    Изучить влияние свойств позиционирования и z-index при использовании внутри сетки

Испытания

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

Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия

Верстальщик

Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев