CSS Grid: создание сеток
Изучите CSS Grid — мощнейший инструмент для создания двумерных сеток. Научитесь строить сложные макеты легко и элегантно.
Начать курсПрограмма курса
Последовательно изучайте материал от простого к сложному
Введение в CSS Grid
Что такое CSS Grid, чем он отличается от Flexbox и когда его использовать.
Строки и столбцы
Создаём сетки с помощью grid-template-columns, grid-template-rows, fr, repeat() и minmax().
Размещение элементов
Управляем позицией элементов: grid-column, grid-row, span и grid-area.
Выравнивание в Grid
justify-items, align-items, justify-content, align-content и выравнивание отдельных элементов.
Адаптивные сетки
auto-fill, auto-fit и создание адаптивных сеток без медиа-запросов.
Практика: галерея
Создаём красивую адаптивную галерею с разными размерами карточек.
Заключение
Подведение итогов, шпаргалка по Grid и полезные ресурсы.