Урок 27. Задания: Строки, колонки и grid-template

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

⚡ Кратко

Шесть заданий по возрастанию: от трёх равных колонок до адаптивной сетки с крупной плиткой. Каждое проверяй в Grid overlay.

Задания

  1. Три равные колонки. Создай контейнер .cards с шестью карточками и тремя равными колонками через repeat(3, 1fr) и gap: 16px.
    Ожидаемый результат: две строки по три одинаковые карточки, равные зазоры.
  2. Разные пропорции. Сделай раскладку из двух колонок 2fr 1fr — широкая зона контента и узкий сайдбар.
  3. Гибкий минимум. Замени фиксированные колонки на repeat(3, minmax(120px, 1fr)) и убедись, что при сужении карточки не становятся уже 120px.
  4. Адаптив без media queries. Используй repeat(auto-fit, minmax(200px, 1fr)). Сужай окно браузера — карточки должны сами переноситься на новые строки.
    Ожидаемый результат: на широком экране 4–5 колонок, на узком — одна.
  5. Широкая плитка. Дай одной карточке класс .card--wide с grid-column: span 2 и проверь, что она занимает два трека.
  6. Крупная плитка-герой. Сделай первую карточку grid-column: span 2; grid-row: span 2 (баннер 2×2), остальные пусть обтекают её. Высоты строк задай через grid-template-rows.
Проверка: включи Grid overlay (DevTools → значок grid у display: grid) и назови по схеме номера линий, треки и gap. Для каждого задания ответь: почему здесь уместен Grid, а не Flexbox?

Навигация