Урок 26. Примеры: Введение в CSS Grid

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

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

1. Базовая разметка под Grid

Сетка всегда начинается с контейнера и нескольких детей. Сам по себе HTML — обычные блоки; двумерным его делает CSS на родителе.

<section class="gallery">
  <article>HTML</article>
  <article>CSS</article>
  <article>Layout</article>
</section>

2. Три равные колонки — 1fr 1fr 1fr

Каждая колонка получает по одной доле свободного места, поэтому они одинаковой ширины и тянутся за контейнером.

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

3. То же короче — repeat(3, 1fr)

repeat(3, 1fr) — точно та же сетка, но без повторов. Удобно, когда колонок много.

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

4. Смешанные колонки — 200px 1fr

Первая колонка фиксирована (200px — например, боковое меню), вторая забирает всё остальное место.

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
}

5. Колонки + строки и крупный gap

Зададим и колонки, и две строки, и больший зазор. Лишние элементы создают новые строки сами.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 60px 60px;
  gap: 20px;
}