Справочник HTML & CSS

grid-column

Какие колонки занимает элемент сетки.

Синтаксис

grid-column: start / end;

Значения

Параметр	Тип	Описание
start / end	lines	Номера линий: `1 / 3` — первая и вторая колонки.
span n	keyword	Занимает n колонок от того места, куда попал элемент.
1 / -1	lines	От первой линии до последней — на всю ширину.

Примеры

Элемент на всю ширину и элемент на две колонки:

<style>
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .grid div { padding: 8px; background: lightskyblue; }
</style>
 
<div class="grid">
  <div style="grid-column: 1 / -1;">1 / -1 — the full width</div>
  <div style="grid-column: span 2;">span 2</div>
  <div>1</div>
</div>

Примечания

Линии нумеруются с 1, отрицательные номера считаются с конца. Линий на одну больше, чем колонок.

См. также

grid-row — Какие ряды занимает элемент сетки.
grid-area — Помещает элемент сетки в именованную область или между заданными линиями.
grid-template-columns — Количество и ширина колонок сетки.

В учебнике

Линии и области сетки — Как поставить элемент в нужное место сетки — номера линий, grid-column и grid-row, span, именованные области grid-template-areas.

Спасибо, что читаете!