grid-column¶
Свойство grid-column
— это сокращение для grid-column-start
+ grid-column-end
.
Grid Layout
Руководство по Grid Layout
Синтаксис¶
/* 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>
- каждый из них принимает тоже самое, что и в длинной версии, включая охват;
Значение по-умолчанию:
grid-column-start
:auto
grid-column-end
:auto
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
.item-c {
grid-column: 3 / span 2;
grid-row: third-line / 4;
}
Если значение конечной линии не указано, то элемент будет охватывать только 1 трек, по умолчанию.