W3docs
ru
Войти

CSS-свойство grid-column-start

Узнайте, как CSS-свойство grid-column-start привязывает элемент сетки к линии столбца. Синтаксис, auto, span, именованные линии и примеры.

Свойство CSS grid-column-start задаёт линию столбца, с которой начинается элемент сетки — его начальный край по инлайн-оси. Вместе с grid-column-end оно определяет, сколько столбцов занимает элемент и где он располагается. Оба свойства обычно записываются с помощью сокращённого grid-column: grid-column: <start> / <end>.

Используйте grid-column-start, когда необходимо явно разместить элемент в раскладке CSS Grid — например, чтобы растянуть баннер-герой со второго столбца или принудительно поместить боковую панель в определённый трек вне зависимости от порядка в разметке.

Нумерация линий сетки: в сетке из четырёх столбцов есть пять вертикальных линий, пронумерованных от 1 до 5 от начального края по инлайн-оси. Можно использовать отрицательные числа: -1 обозначает последнюю линию, -2 — предпоследнюю и так далее.

Initial Valueauto
Applies toGrid items
InheritedNo
AnimatableYes — the starting line is animatable
VersionCSS Grid Layout Module Level 1
DOM Syntaxobject.style.gridColumnStart = "2"

Синтаксис

grid-column-start: auto | <integer> | <name> | span <n> | initial | inherit;
  • auto — браузер размещает элемент с помощью автоматического размещения (по умолчанию).
  • <integer> — номер линии сетки, например 2 или -1.
  • <name> — именованная линия, определённая в grid-template-columns.
  • span <n> — элемент занимает n треков столбцов от места своего размещения.

Значения

ЗначениеОписание
autoПо умолчанию. Элемент следует обычному автоматическому размещению и занимает один столбец.
<integer>Положительный или отрицательный номер линии. Отрицательные значения отсчитываются от конца явной сетки.
<name>Имя линии сетки, например main-start, если она определена через [main-start] в grid-template-columns.
span <n>Занять n треков столбцов. В отличие от номера линии, это не фиксирует начальную позицию элемента.
initialСбрасывает свойство до начального значения (auto).
inheritНаследует значение от родительского элемента.

Примеры

Размещение элемента на конкретной линии

Установка grid-column-start: 2 помещает первый элемент так, чтобы его левый край совпадал со второй вертикальной линией сетки, смещая его во второй слот столбца.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-start: 6;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: 6 — implicit column created</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>
Попробуйте сами »

Поскольку шаблон определяет только четыре столбца (линии 1–5), запрос box1 начаться с линии 6 вынуждает браузер создать неявные столбцы (линии 5 и 6) для его размещения. Это частая ловушка — всегда проверяйте, что номер линии не выходит за пределы явной сетки, если только вы не хотите намеренно создать неявные треки.

![Grid-column-start property](/uploads/media/default/0001/03/52b22b9f4f2b6f8f1d65a6fb309fe3ee15e77b77.png "Grid-column-start property" =420x)

Растягивание столбцов с помощью span

Использование span 2 указывает элементу занять два трека столбцов с того места, куда поставит его автоматическое размещение. В отличие от номера линии, span является относительным — точная начальная позиция элемента по-прежнему определяется автоматическим размещением.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .span-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #888;
        padding: 10px;
        margin-top: 20px;
      }
      .span-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .span-box1 {
        grid-column-start: span 2;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: span 2</h2>
    <div class="span-container">
      <div class="span-box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>
Попробуйте сами »

Это наиболее читаемая форма, когда важна ширина элемента в столбцах, но не его точная позиция. Чтобы одновременно зафиксировать позицию и управлять шириной, комбинируйте grid-column-start с grid-column-end или используйте сокращённое свойство grid-column.

Автоматическое размещение по умолчанию

При значении auto (по умолчанию) элемент занимает следующую доступную ячейку, определяемую алгоритмом grid auto-flow. Элементы заполняют сетку строка за строкой.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 10px;
        background-color: #666;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column-start: auto;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: auto (default)</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div class="box2">2</div>
      <div class="box3">3</div>
      <div class="box4">4</div>
      <div class="box5">5</div>
      <div class="box6">6</div>
      <div class="box7">7</div>
      <div class="box8">8</div>
      <div class="box9">9</div>
    </div>
  </body>
</html>
Попробуйте сами »

Привязка к четвёртому столбцу

grid-column-start: 4 закрепляет левый край первого элемента у четвёртой вертикальной линии. Остальные элементы заполняют предыдущие столбцы через автоматическое размещение.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        gap: 12px;
        background-color: red;
        padding: 15px;
      }
      .grid-container > div {
        background-color: #dcdcdc;
        text-align: center;
        padding: 20px 0;
        font-size: 35px;
        color: white;
      }
      .box1 {
        grid-column-start: 4;
      }
    </style>
  </head>
  <body>
    <h2>grid-column-start: 4</h2>
    <div class="grid-container">
      <div class="box1">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
      <div>7</div>
      <div>8</div>
      <div>9</div>
    </div>
  </body>
</html>
Попробуйте сами »

Распространённые паттерны и подводные камни

Комбинирование начала и конца для точного размещения

Для полного контроля над размещением комбинируйте grid-column-start с grid-column-end. Сокращённое свойство grid-column — наиболее лаконичный способ сделать это:

/* Place item from column line 2 to column line 4 (spans 2 tracks) */
.item {
  grid-column: 2 / 4;
  /* equivalent to: */
  /* grid-column-start: 2; */
  /* grid-column-end: 4; */
}

Использование отрицательных номеров линий

Отрицательные целые числа отсчитываются от конца явной сетки. -1 обозначает последнюю линию явной сетки, что позволяет легко растянуть элемент до дальнего края, не зная количества столбцов:

/* Full-width banner across all explicit columns */
.banner {
  grid-column-start: 1;
  grid-column-end: -1;
}

Это эквивалентно grid-column: 1 / -1. Обратите внимание, что отрицательные числа адресуют только линии явной сетки (определённой через grid-template-columns); они не достигают неявных столбцов, созданных при переполнении.

Именованные линии

Когда в grid-template-columns определены именованные линии, на них можно ссылаться по имени, а не по номеру. Это делает раскладки самодокументируемыми:

.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
}

.sidebar {
  grid-column-start: sidebar-start;  /* or just: grid-column-start: 1 */
}

.main {
  grid-column-start: content-start;  /* or: grid-column-start: 2 */
}

Именованные линии особенно полезны в крупных или повторно используемых компонентах раскладки, где номера столбцов могут меняться.

Взаимодействие явного размещения с автоматическим

Когда grid-column-start задан на явную линию, автоматическое размещение последующих элементов возобновляется со следующей доступной ячейки после явно размещённого элемента. Это может приводить к образованию пустых ячеек — используйте grid-auto-flow: dense для автоматического заполнения пробелов.

Связанные свойства

  • grid-column-end — задаёт линию, на которой заканчивается элемент.
  • grid-column — сокращённое свойство для grid-column-start и grid-column-end.
  • grid-row-start — аналог данного свойства по оси строк.
  • grid-row — сокращённое свойство для grid-row-start и grid-row-end.
  • grid-area — сокращённое свойство, задающее начало и конец строки и столбца одновременно.
  • grid-template-columns — определяет столбцы и именованные линии, на которые ссылается это свойство.
  • grid-auto-flow — управляет заполнением сетки автоматически размещаемыми элементами, влияя на поведение пустых ячеек.

Практика

Практика
Что делает CSS-свойство grid-column-start?
Что делает CSS-свойство grid-column-start?
Was this page helpful?