Справочники
Поиск

grid-column-end

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

  1. Синтаксис
  2. Значения
  3. Спецификации
  4. Поддержка браузерами
  5. Описание и примеры

Синтаксис

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

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

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

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

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

Значения

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

  • <line> — может быть числом ссылающимся на пронумерованную линию, или названием ссылающимся на именованую линию;
  • span <number> — элемент, который будет охватывать предоставленное количество треков;
  • span <name> — элемент будет будет охватывать пока не достигнет линии с указанным названием;
  • auto — указывает автоматическое размещения, автоматическое охват, или охват по умолчанию;

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

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

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

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

Примеры:

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

CSS Grid Start End

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

CSS Grid Start End

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

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