Урок 26. Задания: Введение в CSS Grid

Задания

Создай файл с одним контейнером и шестью дочерними блоками. Выполняй по порядку — каждый шаг строится на предыдущем.

1. Включи на контейнере display: grid и убедись, что без шаблона колонок все блоки встали в один столбец.
2. Задай три равные колонки через grid-template-columns: 1fr 1fr 1fr.
3. Перепиши то же самое короче — через repeat(3, 1fr).
4. Добавь gap: 16px и проверь, что зазор появился только между ячейками, а не по краям.
5. Сделай первую колонку фиксированной: grid-template-columns: 200px 1fr 1fr. Что изменилось?
6. Добавь grid-template-rows: 80px 80px и понаблюдай, как второй ряд блоков встал в новую строку.
7. Включи Grid overlay в DevTools и назови: где здесь линии, треки и gap.
8. Объясни словами: почему для этой галереи Grid удобнее, чем Flexbox?

Ожидаемый результат после шагов 3–4

/* к этому виду нужно прийти */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}