Как расположить элемент в определённой ячейке сетки с помощью CSS Grid?

CSS Grid позволяет точно управлять положением элементов внутри сетки, задавая им координаты по колонкам и строкам. Сетка состоит из линий (grid lines), которые нумеруются начиная с 1. Элемент размещается между двумя линиями по каждой оси.

Основные свойства позиционирования

• grid-column — определяет, в каких колонках находится элемент (начальная / конечная линия).
• grid-row — аналогично для строк.
• grid-area — сокращённая запись: row-start / column-start / row-end / column-end.

Например, чтобы поместить элемент во вторую колонку первой строки, нужно указать начальную линию 2 и конечную 3 по колонкам, а по строкам — 1 и 2.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 100px);
}
.item {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
/* или короче */
.item {
  grid-area: 1 / 2 / 2 / 3;
}

Если нужно растянуть элемент на несколько ячеек, конечная линия указывается дальше. Например, grid-column: 1 / 4 займёт все три колонки. Также можно использовать ключевое слово span: grid-column: 2 / span 2 — элемент начнётся со второй линии и займёт две колонки.

Именованные линии

Вместо номеров можно давать имена линиям через grid-template-columns: [start] 1fr [middle] 1fr [end] и затем ссылаться на них: grid-column: middle / end. Это делает код более читаемым.

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

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

Итог: используйте grid-column и grid-row (или grid-area) для точного размещения элементов в нужных ячейках. Это особенно удобно для сложных макетов, где важна предсказуемость расположения без изменения HTML-структуры.