Расположение элементов в Grid: span, line names, placement

Гриды — это не только клеточки, а целая система координат! 🌐

Grid — это не просто разметка, а мощный инструмент для точного позиционирования элементов. Сегодня разберём три ключевых механизма: span, именованные линии и размещение элементов (placement).

.grid-container {
  display: grid;
  grid-template-columns: [start] 100px [middle] auto [end];
  grid-template-rows: [header-start] 50px [header-end main-start] 200px [main-end];
}

💡 Совет: Именованные линии делают код читаемым. Вместо grid-column: 1 / 3 можно писать grid-column: start / end — сразу понятно, где что находится.

Именованные линии: ваш GPS в Grid 🗺️

Именование линий — как расстановка дорожных указателей. Пример:

.grid {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [content-start] 1fr [content-end];
  grid-template-rows: [top] auto [middle] auto [bottom];
}

Как использовать:

.header {
  grid-column: sidebar-start / content-end; /* От левого края сайдбара до правого края контента */
  grid-row: top; /* Занимает только первую строку */
}

⚠️ Важно: Имена линий чувствительны к регистру! [Main] и [main] — разные линии.

span — растягиваем элементы как резину 🏗️

Ключевое слово span позволяет указывать, сколько треков (колонок или строк) должен занимать элемент, вместо точных координат.

Пример:

.item {
  grid-column: 2 / span 3; /* Начинается со второй линии и занимает 3 колонки */
  grid-row: span 2; /* Занимает 2 строки, начало автоматически */
}

Совмещение с именованными линиями:

.special {
  grid-column: content-start / span 2; /* От начала контента + 2 колонки вправо */
}

Размещение элементов (placement) — расставляем всё по полочкам 🧩

grid-column и grid-row — это сокращения для свойств:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Полная запись:

.element {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: header-start;
  grid-row-end: span 2;
}

Сокращённая запись:

.element {
  grid-column: 2 / 4;
  grid-row: header-start / span 2;
}

Практический пример: сетка блога 📰

Создадим макет с хедером, сайдбаром, контентом и футером:

.blog {
  display: grid;
  grid-template-columns: [side] 200px [main] 1fr;
  grid-template-rows: [header] 80px [content] auto [footer] 60px;
}

.header {
  grid-column: side / main;
  grid-row: header;
}

.sidebar {
  grid-column: side;
  grid-row: content;
}

.main-content {
  grid-column: main;
  grid-row: content;
}

.footer {
  grid-column: side / main;
  grid-row: footer;
}

Играем с отрицательными линиями 🔄

Отрицательные числа отсчитывают линии с конца сетки. -1 — последняя линия, -2 — предпоследняя и т.д.

Пример:

.full-width {
  grid-column: 1 / -1; /* От первой до последней линии */
}

Автоматическое размещение с auto 🤖

Если не указывать grid-column или grid-row, элемент размещается автоматически. Но можно управлять этим процессом с помощью grid-auto-flow (но это тема отдельного урока).

Итог: ваши новые суперспособности в Grid 🦸

• Именованные линии делают код понятным и гибким.
• span упрощает растягивание элементов.
• Размещение (placement) — мощный инструмент для точного позиционирования.

Попробуйте создать макет, используя все три метода одновременно! Например, календарь или галерею фотографий.

.gallery {
  display: grid;
  grid-template-columns: [first] 100px [second] 100px [third] 100px [last];
  grid-template-rows: [row-start] auto [row-end];
}

.photo-large {
  grid-column: first / span 2;
  grid-row: row-start;
}

🎨 Творческий вызов: Создайте макет, где элементы перекрываются, используя z-index и точное позиционирование в Grid.