W3docs
ru
Войти

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

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

Свойство CSS grid-column является сокращением, которое размещает элемент сетки вдоль горизонтальной (строчной) оси. Оно задаёт, где элемент начинается и где заканчивается, что вместе определяет его положение в столбце и количество охватываемых столбцов. Оно объединяет два развёрнутых свойства:

  • grid-column-start — линия столбца, с которой начинается элемент.
  • grid-column-end — линия столбца, на которой заканчивается элемент.

Сетка делится линиями сетки, и grid-column работает, ссылаясь именно на эти линии, а не на ячейки между ними. В сетке из четырёх столбцов есть пять вертикальных линий, пронумерованных от 1 до 5 слева направо (или от −5 до −1 при отсчёте справа).

Примечание: grid-column управляет только размещением по столбцам. Чтобы разместить элемент по строкам, используйте grid-row. Чтобы задать положение элемента сразу по строке и столбцу, используйте grid-area.

Начальное значениеauto / auto
Применяется кЭлементам сетки
НаследуетсяНет
АнимируемоеДа
СпецификацияCSS Grid Layout Level 1
Синтаксис DOMobject.style.gridColumn = "1 / span 3"

Синтаксис

/* Two explicit line numbers */
grid-column: <start-line> / <end-line>;

/* Start line + span count */
grid-column: <start-line> / span <number>;

/* Span by named line */
grid-column: span <name>;

/* Single value (sets start; end defaults to auto) */
grid-column: <start-line>;

/* Global keywords */
grid-column: initial | inherit | unset | revert;

Форматы значений

Существует четыре распространённых способа записи grid-column:

ФорматПримерЧто делает
Два номера линий2 / 4Начинается с линии 2, заканчивается на линии 4 (охватывает столбцы 2–3)
Начало + количество пролётов2 / span 2Начинается с линии 2, охватывает 2 столбца вперёд
Отрицательный номер линии1 / -1Охватывает от первой до самой последней линии (на всю ширину)
Именованные линииcontent-start / content-endИспользует имена из grid-template-columns
Одно значение3Устанавливает grid-column-start: 3; конец — auto (один столбец)

Если указано только одно значение (без /), устанавливается только grid-column-start; значение grid-column-end по умолчанию равно auto, и элемент занимает одну дорожку столбца.

Как нумеруются линии сетки

Линии сетки нумеруются с 1 от начального края (слева в LTR-раскладке). Можно также использовать отрицательные числа для отсчёта от конечного края: −1 всегда ссылается на последнюю линию вне зависимости от количества столбцов.

Column tracks:  [  1  ][  2  ][  3  ][  4  ]
Line numbers:  1       2      3      4       5
Negative:     -5      -4     -3     -2      -1

Это означает, что grid-column: 1 / -1 всегда растягивает элемент на всю ширину явной сетки, независимо от количества столбцов.

Примеры

Размещение элемента с явными номерами линий

Блок 6 размещён между линиями столбцов 2 и 4, поэтому он охватывает столбцы 2 и 3.

<!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: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #666;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .box6 {
        grid-column: 2 / 4;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column property example</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>
  </body>
</html>
Попробуйте сами »
Свойство CSS grid-column: блок 6 охватывает столбцы 2–4 в сетке

Размещение первого элемента с помощью 1 / 3

Блок 1 размещён с grid-column: 1 / 3, занимая первые две дорожки столбцов.

<!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: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #888;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .box1 {
        grid-column: 1 / 3;
      }
    </style>
  </head>
  <body>
    <h2>Grid-column property example</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>
  </body>
</html>
Попробуйте сами »

Использование span и элемент на всю ширину с 1 / -1

Ключевое слово span удобно, когда известно количество столбцов для охвата, но не номер конечной линии. Отрицательная конечная линия (-1) всегда достигает последней линии столбца, растягивая элемент на всю ширину явной сетки.

<!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: #ccc;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #4caf50;
        color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
      .featured {
        grid-column: 1 / span 2; /* starts at line 1, covers 2 columns */
      }
      .full-width {
        grid-column: 1 / -1; /* spans the whole explicit grid */
      }
    </style>
  </head>
  <body>
    <h2>span and full-width example</h2>
    <div class="grid-container">
      <div class="featured">Featured (2 cols)</div>
      <div>B</div>
      <div>C</div>
      <div>D</div>
      <div class="full-width">Full width (1 / -1)</div>
    </div>
  </body>
</html>

Размещение элементов с именованными линиями

Линии сетки можно именовать в grid-template-columns с помощью синтаксиса квадратных скобок, а затем использовать эти имена в grid-column. Это делает разметку более читаемой и устойчивой к изменению количества столбцов.

<!DOCTYPE html>
<html>
  <head>
    <title>Named grid lines</title>
    <style>
      .grid-container {
        display: grid;
        /* Names the lines around the middle two columns */
        grid-template-columns:
          [full-start] 1fr
          [content-start] 2fr 2fr
          [content-end] 1fr
          [full-end];
        gap: 10px;
        background-color: #eee;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #5c6bc0;
        color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 18px;
      }
      .sidebar {
        grid-column: full-start / content-start; /* first column only */
      }
      .main {
        grid-column: content-start / content-end; /* middle two columns */
      }
      .aside {
        grid-column: content-end / full-end; /* last column only */
      }
    </style>
  </head>
  <body>
    <h2>Named lines example</h2>
    <div class="grid-container">
      <div class="sidebar">Sidebar</div>
      <div class="main">Main content</div>
      <div class="aside">Aside</div>
    </div>
  </body>
</html>

Значения

ЗначениеОписание
<line-number>Целочисленный номер линии (положительный — от начала, отрицательный — от конца).
<line-name>Пользовательское имя, определённое в grid-template-columns.
span <number>Охватывает указанное количество дорожек столбца.
span <name>Охватывает до следующей линии с указанным именем.
autoБраузер размещает элемент автоматически (по умолчанию).
initialСбрасывает до значения по умолчанию (auto / auto).
inheritНаследует вычисленное значение от родительского элемента.
unsetДействует как inherit, если свойство наследуется, иначе — как initial.

Распространённые ошибки

  • 1 / -1 охватывает только явную сетку. Если элементы размещены в неявной сетке (дополнительные строки/столбцы, создаваемые браузером автоматически), отрицательная конечная линия не распространяется на эти дорожки. Сначала определите полную сетку с помощью grid-template-columns.
  • span без начальной линии. При записи grid-column: span 3 устанавливается только grid-column-end: span 3; начало равно auto, и браузер выбирает его сам. Это допустимо, но размещение зависит от порядка автопотока.
  • Поиск именованной линии. Если вы ссылаетесь на имя, которого нет в шаблоне, браузер трактует его как auto. Всегда проверяйте имя в grid-template-columns.
  • Сокращение с одним значением. grid-column: 3 устанавливает начало на линию 3, а конец — в auto, а не на линию 4. Элемент занимает ровно одну дорожку столбца, если только автоматически размещённый конец не охватывает больше.

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

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

Практика

Практика
Какова функциональность свойства 'grid-column' в CSS?
Какова функциональность свойства 'grid-column' в CSS?
Was this page helpful?