Урок 27. Решения: Строки, колонки и grid-template

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

⚡ Кратко

Разбор ключевых заданий с живым результатом. Сетка описывается на контейнере; крупные плитки получают место через span.

Решение задания 4 — адаптив без media queries

auto-fit подбирает число колонок шириной от 200px, а minmax позволяет им растягиваться. Ни одного @media.

1
2
3
4
/* styles.css */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Решение задания 6 — крупная плитка-герой

Первая карточка занимает 2×2 трека; остальные автоматически встают в свободные ячейки.

Герой 2×2
1
2
<section class="cards">
  <article class="card hero">Герой 2×2</article>
  <article class="card">1</article>
  <article class="card">2</article>
</section>
/* styles.css */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 64px 64px;
  gap: 12px;
}
.hero {
  grid-column: span 2;
  grid-row: span 2;
}

Логика решения

Сетка всегда описывается на контейнере (grid-template-columns/rows, gap). Дочерние элементы по умолчанию заполняют ячейки слева направо, сверху вниз. Чтобы элемент занял больше одного трека, ему задают grid-column/grid-row со span или явными номерами линий. Для адаптива выбирают auto-fit + minmax() вместо ручного перечисления колонок.

Навигация