CSS Grid. Полный практикум: от основ до тонкостей [HTML Academy]

Складчина: CSS Grid. Полный практикум: от основ до тонкостей [HTML Academy]

Курс разработан для опытных разработчиков, которые хотят повысить свой профессиональный уровень. Он подойдёт для работающих людей, у которых мало времени

Спойлер: Программа курса

Раздел 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