grid-column-start¶

Свойство grid-column-start определяет местоположение в сетке ссылаясь на конкретные линии. grid-column-start / grid-row-start — это линия с которой начинается элемент.

Демо¶

Синтаксис¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

/* Keyword value */
grid-column-start: auto;

/* <custom-ident> value */
grid-column-start: somegridarea;

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

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

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

Значения¶

Значение по-умолчанию: auto

<line>

может быть числом ссылающимся на пронумерованную линию, или названием ссылающимся на именованую линию;

span <number>

элемент, который будет охватывать предоставленное количество треков;

span <name>

элемент будет будет охватывать пока не достигнет линии с указанным названием;

auto

указывает автоматическое размещения, автоматическое охват, или охват по умолчанию;

Спецификации¶

• CSS Grid Layout

Поддержка браузерами¶

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

Описание и примеры¶

Примеры:

1
2
3
4
5
6

.item-a {
    grid-column-start: 2;
    grid-column-end: five;
    grid-row-start: row1-start;
    grid-row-end: 3;
}

1
2
3
4
5
6

.item-b {
    grid-column-start: 1;
    grid-column-end: span col4-start;
    grid-row-start: 2;
    grid-row-end: span 2;
}

Если grid-column-end / grid-row-end не объявлены, элемент будет охватывать 1 трек по умолчанию.

Элементы могут перекрывать друг друга. Вы можете использовать z-index для управления их порядком.

См. также¶

• Руководство по Grid Layout

Комментарии