Справочник · CSS

grid-column: на сколько колонок растянуть элемент

Свойство ставит элемент между вертикальными линиями сетки. Соседи занимают оставшиеся ячейки сами.

Как это работает

grid-column: 1 / -1 растягивает блок на всю ширину. grid-column: span 2 занимает две колонки с текущей позиции. Линии нумеруются с 1, конечная линия не входит в промежуток. Не растягивай так каждый элемент: сетка тогда не нужна. Широкий вводный блок и обычные карточки под ним — нормальный пример.

.feature { grid-column: 1 / -1; }
.card { grid-column: span 1; }

Когда использовать

Обложка каталога на всю ширину и карточки ниже. Точную раскладку редких зон можно описать и через grid-template-areas.

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

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