Домашнее задание

Задача: сделайте адаптивный список из 6–8 карточек через repeat(auto-fit, minmax(200px, 1fr)). Одна «избранная» карточка должна занимать две колонки через grid-column: span 2. Никаких @media — адаптив только средствами Grid.

Ожидаемый результат

На широком экране — несколько колонок, избранная карточка вдвое шире. При сужении окна карточки сами переносятся на новые строки.

Избранное (span 2)

Карточка

/* styles.css — целевой результат */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.card--featured { grid-column: span 2; }

Шаги

Разметка

Создайте контейнер .cards и 6–8 блоков .card. Одному добавьте класс .card--featured.

📄 index.html

<section class="cards">
  <article class="card card--featured">Избранное</article>
  <article class="card">Карточка</article>
  <!-- ещё карточки -->
</section>

Grid

Опишите адаптивные колонки на контейнере и span на избранной карточке.

📄 styles.css

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.card--featured { grid-column: span 2; }

Проверка

Включите Grid overlay (DevTools), сузьте окно и убедитесь: число колонок меняется само, избранная карточка стабильно занимает два трека, gap одинаковый. Связь с теорией — раздел «Адаптивная сетка без media queries».

Урок 27. Домашнее задание: Строки, колонки и grid-template

⚡ Кратко