Курс разработан для опытных разработчиков, которые хотят повысить свой профессиональный уровень. Он подойдёт для работающих людей, у которых мало времени
Спойлер: Программа курса
Раздел 1
Технология
Текущее состояние технологии
История развития и версии спецификаций
1 версия спецификации
2 версия спецификации
Принцип использования технологии, отличия одномерных и двумерных сеток
«Grid не замена Flexbox»
Grid for layout, Flexbox for components
Основная и важная терминология при использовании гридов
grid контейнер
grid элемент
grid линия
grid ячейка
grid полоса
grid область
grid поток
Использование инструментов отладки
Chrome dev tools
Firefox Nightly
Раздел 2
Отрисовка сетки в Grid контейнере
grid-template-columns и grid-template-rows
Назначения свойств
Принцип организации строк и колонок
Явные и неявные grid-column и grid-row, а также влияние потока на их построение
Единицы измерения
px, %
fr и принцип его вычисления
Комбинирование свойств в рамках одного grid контейнера
Расположения элементов внутри сетки по вертикали и по горизонтали
Grid линий
Именованные линии
имена по умолчанию
ручное именование
Числовые значения линий по вертикали и по горизонтали
различие отрицательных и положительных номеров линий
Комбинированное обращение к линиям
Расстояние между ячейками
column-gap и row-gap
Размеры в разных единицах измерения
Сокращенное название gap
Устаревшие свойства: grid-column-gap, grid-row-gap, grid-gap
Использование gap с flexbox
Раздел 3
Базовое расположение Grid элементов внутри контейнера и их расстановка через линии
Базовый принцип расположения элементов внутри сетки по вертикали и по горизонтали
Правила использования базовых свойств и их поведение
Grid-column-start и grid-column-end
Grid-row-start и grid-row-end
Возможные значения свойств
Имя линии
Номер линии
Ключевое свойство span
Свойство auto
Позиционирование Grid элементов по вертикали и по горизонтали
Фиксированная позиция элемента
Позиционирование элемента относительно других элементов
Поведение других элементов при фиксировании одного из элемента
Частые ошибки и поведение гриды при неверном использовании свойств
Широкие элементы и minmax(0, 1fr)
Grid-column и grid-row для элементов
Правила использования коротких свойств для позиционирования элементов
Раздел 4
Расположение элементов используя шаблоны областей
grid-template-areas
Правила именований областей grid-area-name и отрисовки шаблонов
Значение .(точка) для пустой ячейки
Значение none
Примеры полного перестраивания сетки в медиа запросах
Частые ошибки и их последствия
grid-area для элемента
Правила установки имени
Использование свойств row-start, column-start, row-end, column-end для отрисовки области
Использование эмоджи как имен областей, и почему их не стоит использовать
grid-template для контейнера
Правила использования сокращенной записи
grid-template-rows, grid-template-columns, grid-template-areas одним свойством
Раздел 5
Выравнивание элементов внутри Grid и выравнивание отдельных элементов
justify-items для выравнивания внутри сетки по горизонтали
align-items для выравнивания внутри сетки по вертикали
place-items как короткое свойство для выравнивая внутри сетки по вертикали и горизонтали
justify-content для выравнивая всей сетки по горизонтали
align-content для выравнивая всей сетки по вертикали
place-content как короткое свойство для выравнивая всей сетки по вертикали и горизонтали
justify-self для горизонтального выравнивания элемента внутри ячейки
align-self для вертикального выравнивания элемента внутри
place-self как короткое свойство для выравнивания элемента внутри ячейки
Раздел 6
Продвинутые техники построения и заполнения Grid
Построение автоматических колонок
Единицы измерения:
auto и его значения для вертикали и горизонтали
min-content, max-content, fit-content
auto-fill, auto-fit
Функция repeat() для генерации большого количества линий и строк
нюансы работы с auto-fill и auto-fit
отсутствие вложенности
Ключевые особенности при построении сетки используя auto-fill и auto-fit
Адаптивные сетки без медиа выражений
Использование именованных линий для упрощения интеграции с CMS/JS
Автоматическое распределение элементов по ячейкам с нарушением порядка
Проблема с «дырами», которая может возникать в сетках с элементами разных размеров
Проблемы с изменением позиции элементов в потоке
Ячейки с измененным z-index + position: absolute
Гриды одним свойством grid для контейнера
Анимированные сетки Grid
Свойства, поддающиеся анимациям
Поддержка браузерами
Свойства, которые не влияют на сетку
float & clear
margin ( расстояние между ячейками)
vertical-align
::first-line & ::first-letter
Если контейнеру задан float или position: absolute
Проблемы кроссбраузерности (Safari vs Chrome)
grid-auto-row и -webkit-min-content
Раздел 7
Гриды и IE11
Особенности поддержки старой версии спецификации
Поддерживаемые и неподдерживаемые свойства
Особенность поддержки частей спецификации
Использование Autoprefixer
Использование grid-areas для генерации совместимого синтаксиса на колонках\строках
Генерация флекс-фолбэка для неизвестного количества блоков
Раздел 8
Grid Layout 2 уровня
Проблемы первого уровня
display: contents и subgrid для создания вложенных сеток
Состояние 2 уровня спецификации
Математические принципы расчета размера вложенных сеток
Отладка вложенных сеток
Раздел 9
Grid Layout 3 уровня
Masonry (Pinterest) Layout
Вычисление колонок с помощью Javascript
Flexbox — необходимо ограничить высоту контейнера
CSS columns — неправильный (вертикальный) порядок tabindex
Grid — выравнивание блоков по горизонтальным линиям, которых не должно быть в Masonry
Экспериментальная версия Masonry в FF Nightly