grid-column

Это свойство является сокращением для следующих свойств CSS:

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

/* Keyword values */
grid-column: auto;
grid-column: auto / auto;

/* <custom-ident> values */
grid-column: some-grid-area;
grid-column: some-grid-area / some-other-grid-area;

/* <integer> + <custom-ident> values */
grid-column: some-grid-area 4;
grid-column: 4 some-grid-area / 6;

/* span + <integer> + <custom-ident> values */
grid-column: span 3;
grid-column: span some-grid-area;
grid-column: 5 some-grid-area span;
grid-column: span 3 / 6;
grid-column: span some-grid-area / span some-other-grid-area;
grid-column: 5 some-grid-area span / 2 span;

/* Global values */
grid-column: inherit;
grid-column: initial;
grid-column: revert;
grid-column: revert-layer;
grid-column: unset;

Это свойство задается одним или двумя <grid-line> значениями.

Если заданы два <grid-line> значения, они разделяются /. grid-column-start свойство задается значением перед косой чертой, а grid-column-end свойство — значением после косой черты.

Каждое <grid-line> значение может быть задано как:

• ключевое слово auto
• или <custom-ident> значение
• или <integer> значение
• или оба <custom-ident> и <integer>, разделенные пробелом
• или ключевое слово span вместе с <custom-ident>, или <integer>, или обоими.

auto

Это ключевое слово, указывающее, что свойство не оказывает влияния на размещение элемента сетки, указывая автоматическое размещение, автоматический интервал или интервал по умолчанию 1.

<custom-ident>

Если есть именованная линия с именем <custom-ident>-start/<custom-ident>-end, она добавляет первую такую линию к размещению элемента сетки.

Примечание: Именованные области сетки автоматически генерируют неявные именованные линии этого формата, поэтому указание grid-column: foo; выберет начальный/конечный край этой именованной области сетки (если не была явно указана другая линия с именем foo-start/foo-end).

В противном случае это обрабатывается так, как если бы целое число 1 было указано вместе с <custom-ident>.

<integer> && <custom-ident>?

Добавляет n-ую линию сетки к размещению элемента сетки. Если задано отрицательное целое число, оно вместо этого считает в обратном порядке, начиная с конечного края явной сетки.

Если имя задано как <custom-ident>, учитываются только линии с этим именем. Если таких линий недостаточно, все неявные линии сетки предполагаются имеющими это имя для определения этого положения.

Значение <integer> 0 является недопустимым.

span && [ <integer> || <custom-ident> ]

Добавляет интервал сетки к размещению элемента сетки, таким образом, соответствующий край области сетки элемента сетки находится на n линиях от противоположного края.

Если имя задано как <custom-ident>, учитываются только линии с этим именем. Если таких линий недостаточно, все неявные линии сетки со стороны явной сетки, соответствующей направлению поиска, предполагаются имеющими это имя для подсчета этого интервала.

Если <integer> опущено, оно по умолчанию равно 1. Отрицательные целые числа или 0 недопустимы.

grid-column = 
  <grid-line> [ / <grid-line> ]?  

<grid-line> = 
  auto                                                |
  <custom-ident>                                      |
  [ [ <integer [-∞,-1]> | <integer [1,∞]> ] && <custom-ident>? ]  |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]   

HTML

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-column: span 2 / 7;
}

Результат

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

• Размещение на основе линий с помощью CSS Grid

• Видео: Размещение на основе линий