Grid — основы

CSS Grid — двумерная (2D) раскладка: элементы выстраиваются одновременно в строки И колонки. display: grid создаёт grid-контейнер. grid-template-columns задаёт колонки. grid-template-rows — строки. Grid = 2D, Flexbox = 1D.

CSS Grid — ДВУМЕРНАЯ раскладка (строки + колонки одновременно).

Создание grid-контейнера: display: grid;

Определение колонок: grid-template-columns: 200px 1fr 2fr; /* Три колонки: 200px, 1/3, 2/3 */

grid-template-columns: repeat(3, 1fr); /* Три равные колонки */

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Адаптивные колонки: минимум 250px */

Определение строк: grid-template-rows: auto 1fr auto; /* Три строки: по содержимому, растянутая, по содержимому */

Gaps: gap: 1rem; /* Расстояние между ячейками */ row-gap: 1rem; /* Только строки */ column-gap: 2rem; /* Только колонки */

Размещение элементов: grid-column: 1 / 3; /* Занимает колонки 1-2 */ grid-row: 1 / 2; /* Занимает строку 1 */ grid-area: 1 / 1 / 3 / 3; /* row-start / col-start / row-end / col-end */

fr — доля свободного места: grid-template-columns: 1fr 2fr 1fr; /* 25% 50% 25% свободного пространства */

Grid — как шахматная доска. grid-template-columns — количество и ширина столбцов. grid-template-rows — количество и высота строк. fr — доля свободного места. Каждая клетка — ячейка grid.

**Самый простой:**

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

.item-featured {
  grid-column: 1 / -1; /* На всю ширину */
}

Базовая трёхколоночная сетка сfeatured-элементом.

**Простой:**

/* Адаптивная сетка */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

/* Sidebar + Main layout */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 2rem;
}

/* Header + Content + Footer */
.page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

/* Размещение элементов */
.header {
  grid-column: 1 / -1; /* На всю ширину */
}

.sidebar {
  grid-row: 2 / 4; /* Занимает 2 строки */
}

Адаптивная сетка, layout, размещение элементов.

**Реальный пример:**

/* Полный page layout */
.page {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   sidebar"
    "footer footer footer";
  grid-template-columns: 200px 1fr 250px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header  { grid-area: header; }
.nav     { grid-area: nav; }
.main    { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer  { grid-area: footer; }

/* Адаптив: на мобильном — одна колонка */
@media (max-width: 768px) {
  .page {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

/* Адаптивная сетка контента */
.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1rem, 3vw, 3rem);
}

Полный grid-layout с grid-template-areas и адаптивом.

**Неправильно:** Использовать grid для одномерной раскладки

**Почему:** Grid — для 2D (строки + колонки). Для 1D (только строка или колонка) — flexbox проще.

**Правильно:** 1D → Flexbox. 2D → Grid. Не используйте grid там, где подходит flex.

**Неправильно:** Не использовать auto-fit/auto-fill

**Почему:** Без auto-fit/fill сетка не адаптируется. Нужны media queries для каждого брейкпоинта.

**Правильно:** repeat(auto-fit, minmax(300px, 1fr)) — адаптивная сетка без медиа-запросов.

**Неправильно:** Хардкодить количество колонок

**Почему:** grid-template-columns: repeat(3, 1fr) — фиксировано. На мобилке 3 колонки будут мелкими.

**Правильно:** auto-fit + minmax — автоматическое количество колонок.

• Grid = ДВУМЕРНАЯ раскладка (строки + колонки)
• grid-template-columns/rows — определение сетки
• fr — доля свободного места
• grid-template-areas — визуальное размещение
• auto-fit + minmax — адаптивная сетка без медиа-запросов

Назад: Вы знаете выравнивание во flexbox (C14) — grid добавляет возможности двумерной раскладки.

Вперёд: В следующем уроке (C16) вы изучите строки, колонки grid и продвинутое размещение элементов.

• MDN: основы CSS Grid
• Дока: гайд по grid