CSS Grid: создание сеток

1

Введение в CSS Grid

Что такое CSS Grid, чем он отличается от Flexbox и когда его использовать.

10 мин

2

Строки и столбцы

Создаём сетки с помощью grid-template-columns, grid-template-rows, fr, repeat() и minmax().

15 мин

3

Размещение элементов

Управляем позицией элементов: grid-column, grid-row, span и grid-area.

15 мин

4

Выравнивание в Grid

justify-items, align-items, justify-content, align-content и выравнивание отдельных элементов.

12 мин

5

Адаптивные сетки

auto-fill, auto-fit и создание адаптивных сеток без медиа-запросов.

15 мин

6

Практика: галерея

Создаём красивую адаптивную галерею с разными размерами карточек.

15 мин

7

Заключение

Подведение итогов, шпаргалка по Grid и полезные ресурсы.

10 мин