Урок 27. Примеры: Строки, колонки и grid-template

Рабочие примеры

В каждом блоке сверху — реальная сетка, снизу — код. Идём от простого к сложному.

1. Три равные колонки — repeat(3, 1fr)

Три трека по одной доле свободного места: колонки одинаковой ширины и тянутся за контейнером.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

2. Разные пропорции — 2fr 1fr 1fr

Первая колонка получает две доли, остальные — по одной. Так делают «широкий главный + два узких».

.cards {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}

3. Гибкий минимум — repeat(3, minmax(120px, 1fr))

Каждая колонка не уже 120px, но если есть место — растягивается до 1fr. Защита от «сплющивания» содержимого.

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
}

4. Адаптивная сетка без media queries — auto-fit

Браузер сам решает, сколько карточек шириной от 150px поместится. Сузь окно — карточки перенесутся на новые строки.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

5. Широкая плитка — grid-column: span 2

Третья карточка занимает сразу две колонки. Остальные встают в обычные одиночные треки.

.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.card--wide { grid-column: span 2; }

6. Крупная плитка — span по колонкам и строкам

Первая ячейка занимает 2×2 трека (как баннер-герой), остальные обтекают её. Высоту строк задаём явно.

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 70px 70px;
  gap: 12px;
}
.hero {
  grid-column: span 2;
  grid-row: span 2;
}

HTML-структура для примеров

<section class="cards">
  <article class="card hero">Герой</article>
  <article class="card">Карточка</article>
  <article class="card">Карточка</article>
</section>