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

📁 Раздел: CSS Grid ⏱️ Время изучения: ~60 мин 🎯 Сложность: Средняя
#display #grid-template-columns #grid-template-rows #gap

⚡ Кратко

Сетка описывается на контейнере: display: grid + grid-template-columns + gap. Фиксированную колонку задаёшь в пикселях, остальное — через fr.

Решение шагов 1–4: три равные колонки

Главное — все Grid-свойства живут на контейнере. Дети ничего о сетке не знают и просто заполняют ячейки слева направо.

1
2
3
4
5
6
📄 lesson-26/solution.css
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

Шесть детей при трёх колонках автоматически образуют две строки — это авто-размещение. Перенос «лишних» элементов происходит не как во Flexbox (flex-wrap), а по правилам сетки: заполнив строку, браузер создаёт следующую.

Решение шага 5: фиксированная колонка + fr

Первая колонка — ровно 200px (например, под меню), две оставшиеся делят остаток поровну через 1fr.

200px
1fr
1fr
.gallery {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 16px;
}

fr делит именно оставшееся место: сначала браузер вычитает 200px и величину gap, и лишь потом раздаёт остаток долям. Поэтому при изменении ширины окна 200px-колонка стоит на месте, а fr-колонки тянутся.

Ответ на шаг 8: почему Grid, а не Flexbox

Галерея — это структура по двум осям (несколько колонок и несколько строк, ровно выровненных между собой). Flexbox раскладывает по одной оси, и чтобы получить такую же ровную сетку, пришлось бы вручную считать проценты ширины и бороться с переносами. Grid описывает то же самое одной строкой grid-template-columns и сам держит и колонки, и строки выровненными.

Навигация