grid-column CSS

Свойство grid-column — это сокращение для grid-column-start + grid-column-end

Значение по умолчанию:
  • grid-column-start: auto
  • grid-column-end: auto
Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Поддержка браузерами:

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

Синтаксис

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

/* <custom-ident> values */
grid-column: somegridarea;
grid-column: somegridarea / someothergridarea;

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

/* span + <integer> + <custom-ident> values */
grid-column: span 3;
grid-column: span somegridarea;
grid-column: 5 somegridarea span;
grid-column: span 3 / 6;
grid-column: span somegridarea / span someothergridarea;
grid-column: 5 somegridarea span / 2 span;

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

Значения

  • <start-line> / <end-line> — каждый из них принимает тоже самое, что и в длинной версии, включая охват;

Примеры

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

CSS Grid Start End
CSS Grid Start End

Если значение конечной линии не указано, то элемент будет охватывать только 1 трек, по умолчанию.