Grid — строки и колонки

Grid позволяет элементам занимать несколько колонок/строк (span), размещаться по имени области (grid-area) и использовать шаблоны (grid-template-areas). auto-placement автоматически размещает элементы. minmax() и repeat() создают адаптивные сетки.

Размещение в Grid:

grid-column: 1 / 3; — занимает колонки 1-2 grid-column: span 2; — занимает 2 колонки grid-column: 1 / -1; — на всю ширину (от первой до последней)

grid-row: 1 / 3; — занимает строки 1-2 grid-row: span 2; — занимает 2 строки

grid-area: row-start / col-start / row-end / col-end; grid-area: 1 / 1 / 3 / 4;

grid-template-areas: Визуальное размещение по именам: grid-template-areas: "header header" "nav main" "footer footer";

grid-area: header; — элемент с area: header

auto-placement: Элементы без явного размещения размещаются автоматически:

• row по умолчанию (заполняет строки)
• column (заполняет колонки)

minmax() + repeat(): grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); Минимум 250px, максимум — делится поровну.

Grid — как таблица Excel. grid-column: 1 / 3 — «объединить ячейки B2:D2». grid-template-areas — «нарисовать макет таблицы словами».

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

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

.featured {
  grid-column: span 2; /* Занимает 2 колонки */
}

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

Span элементов на несколько колонок/строк.

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

/* Grid Template Areas */
.layout {
  display: grid;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

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

/* Span на всю ширину */
.full-width {
  grid-column: 1 / -1;
}

/* Named lines */
.grid {
  grid-template-columns: [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end];
}

Template areas, span на всю ширину, именованные линии.

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

/* Dashboard layout */
.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  gap: 1.5rem;
  padding: 1.5rem;
}

.dashboard-header {
  grid-column: 1 / -1;
}

.stat-card {
  display: grid;
  place-items: center;
  background: white;
  border-radius: 8px;
  padding: 1.5rem;
}

.chart-large {
  grid-column: span 2;
  grid-row: span 2;
}

.chart-wide {
  grid-column: span 2;
}

/* Адаптив */
@media (max-width: 768px) {
  .dashboard {
    grid-template-columns: 1fr;
  }
  .chart-large,
  .chart-wide {
    grid-column: span 1;
  }
}

Dashboard с span, auto-rows и адаптивом.

**Неправильно:** Не использовать grid-template-areas

**Почему:** Обычное размещение (grid-column/row) сложно визуализировать. Template areas — наглядно.

**Правильно:** Для сложных layout используйте grid-template-areas — это как рисунок макета.

**Неправильно:** Забывать про minmax() для адаптива

**Почему:** Без minmax() ячейки могут стать слишком мелкими или слишком большими.

**Правильно:** minmax(250px, 1fr) — minimum и maximum для каждой колонки.

**Неправильно:** Использовать span без планирования

**Почему:** span 2 в 3-колоночной сетке = 2/3 ширины. Нужно понимать, как это повлияет на другие элементы.

**Правильно:** Планируйте span с учётом общего количества колонок.

• grid-column: span N — занимает N колонок
• grid-template-areas — визуальное размещение по именам
• grid-column: 1 / -1 — на всю ширину
• auto-rows: minmax(100px, auto) — автоматические строки
• minmax() + repeat() — адаптивные сетки

Назад: Вы знаете основы grid (C15) — продвинутое размещение позволяет создавать сложные раскладки.

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