До сих пор элементы сами заполняли сетку по порядку — по одной ячейке слева направо и сверху вниз. Но в реальных макетах ячейки часто разного размера: крупная карточка занимает два столбца, баннер тянется на всю ширину, боковая колонка растягивается на несколько строк. Чтобы задавать такое, нужно уметь указывать элементу, какие именно ячейки сетки он занимает. Для этого служат свойства grid-column, grid-row и обобщающее grid-area.

После этого урока вы сможете растягивать элементы на несколько столбцов и строк и точно ставить их в нужное место сетки — а значит, собирать по-настоящему выразительные макеты.

Что уже умеем / что добавим

Вы умеете описывать сетку через grid-template-columns, repeat() и minmax(). Теперь научимся управлять положением отдельных элементов внутри неё. В сквозном проекте мы выделим одну карточку услуги как главную — она займёт два столбца и станет акцентом секции.

Что вы узнаете в рамках статьи

• Как устроены линии сетки и как они нумеруются.
• Как задавать положение элемента через grid-column и grid-row.
• Как растягивать элемент на несколько ячеек с помощью span.
• Как коротко задавать положение свойством grid-area.

Ключевые термины

• Линия сетки (grid line) — граница между столбцами или строками; линии нумеруются с 1.
• grid-column — на какие столбцы (от линии до линии) ложится элемент.
• grid-row — на какие строки ложится элемент.
• span — ключевое слово «растянуть на N ячеек».
• grid-area — краткая запись положения элемента сразу по строкам и столбцам.

Линии сетки и их номера

Ключ к размещению — понять, что сетка состоит из линий. Если у вас три столбца, то вертикальных линий четыре: они нумеруются слева направо, начиная с 1. Первая линия — левый край сетки, последняя — правый. Строки размечены такими же горизонтальными линиями сверху вниз.

Элемент занимает пространство между линиями. Указав «от линии 1 до линии 3», вы говорите браузеру растянуть элемент на первые два столбца. Именно линиями, а не номерами столбцов, оперируют свойства размещения — это стоит держать в голове.

Размещение по столбцам и строкам

Свойство grid-column задаёт, между какими вертикальными линиями лежит элемент, в формате начало / конец:

.card--wide {
  grid-column: 1 / 3;
}

Эта запись означает «от линии 1 до линии 3» — элемент займёт первый и второй столбцы, то есть растянется на два. Аналогично работает grid-row для строк:

.card--tall {
  grid-row: 1 / 3;
}

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

Растягивание через span

Считать линии не всегда удобно — иногда проще сказать «растяни на столько-то ячеек». Для этого есть ключевое слово span:

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

Запись span 2 означает «занять два столбца подряд», начиная с того места, куда элемент попадает по порядку. Это часто удобнее явных номеров линий: если сетка изменится, span продолжит означать «два столбца», тогда как жёсткие номера линий пришлось бы пересчитывать. Так же работает grid-row: span 2 для строк. Для простых случаев «сделать элемент шире на N ячеек» span — самый читаемый способ.

Краткая запись grid-area

Свойство grid-area позволяет задать сразу и строки, и столбцы одной строкой. Порядок значений: начало-строки / начало-столбца / конец-строки / конец-столбца:

.hero {
  grid-area: 1 / 1 / 2 / 3;
}

Это значит: строки с 1 по 2, столбцы с 1 по 3 — то есть первая строка во всю ширину двух столбцов. Запись компактна, но требует помнить порядок четырёх значений. У grid-area есть и вторая, более наглядная роль — обращение к именованным областям сетки, но с ними мы подробно познакомимся в следующем уроке. Пока достаточно понимать, что grid-area объединяет grid-row и grid-column в одну строку.

Применяем в проекте

Сделаем первую карточку услуг главной — пусть она занимает два столбца и работает акцентом секции. Остальные карточки сами перестроятся вокруг неё.

<section class="services">
  <div class="card card--main">Флагманская услуга</div>
  <div class="card">Разработка</div>
  <div class="card">Поддержка</div>
  <div class="card">Аналитика</div>
</section>

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

.card--main {
  grid-column: span 2;
}

Обновите страницу: первая карточка растянулась на два столбца из трёх и сразу притягивает взгляд, а остальные карточки аккуратно заполнили оставшиеся ячейки. Мы не трогали разметку остальных карточек — достаточно было одного свойства на главной. Так span помогает расставлять акценты внутри сетки.

Частые ошибки

• Счёт по столбцам вместо линий.
  grid-column: 1 / 3 — это линии; элемент занимает столбцы между ними, то есть два, а не три.
• Путаница порядка в grid-area.
  Порядок строгий: строка-старт, столбец-старт, строка-конец, столбец-конец.
• span с номером линии.
  span 2 — это «две ячейки», а не «до линии 2»; не смешивайте два подхода в одном значении.
• Свойства размещения на контейнере.
  grid-column и grid-row задают элементам сетки, а не самому grid-контейнеру.

Итоги

Прекрасная работа — теперь вы управляете каждым элементом сетки! Вы разобрались, как нумеруются линии, научились ставить элементы через grid-column и grid-row, растягивать их на несколько ячеек с помощью span и коротко задавать положение через grid-area. Ваш проект получил акцентную карточку, а макеты стали куда выразительнее, чем ровные ряды одинаковых ячеек.

Отличный прогресс! В следующем уроке мы поднимемся на новый уровень удобства — научимся раскладывать макет по именованным областям с помощью grid-template-areas, где структура страницы читается прямо в коде.