CSS свойство `grid-template-columns`

Определение и применение

Свойство grid-template-columns задаёт размеры дорожек и имена линий явных столбцов Grid-контейнера.

Линия — граница дорожки, а не сама дорожка. У трёх столбцов четыре линии. Отрицательные номера считают от конца явной сетки.

repeat(auto-fill, ...) создаёт повторяющиеся дорожки явной сетки и сохраняет пустые. auto-fit после размещения сворачивает пустые повторяющиеся дорожки и прилегающие к ним промежутки.

Для автоматического повторения нужны допустимые фиксированные ограничения, например repeat(auto-fit, minmax(120px, 1fr)). Сочетание repeat(auto-fit, 1fr) недопустимо.

Связанные свойства: grid-template-rows, grid-auto-flow.

В генераторе Grid можно настроить дорожки и промежутки сетки и получить готовый CSS.

Попробуйте значения grid-template-columns

Меняется число и ширина явных колонок. fr распределяет свободное пространство после фиксированных размеров и промежутков.

Значение свойстваgrid-template-columns: 1fr 1fr;grid-template-columns: 60px 1fr;grid-template-columns: 1fr 2fr;grid-template-columns: repeat(3, 1fr);

grid-template-columns: 1fr 1fr

HTML и CSS примера

HTML

<div class="stage demo-target">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.demo-target {
  display: grid;
  grid-template-rows: repeat(2, 60px);
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.demo-target {
  display: grid;
  grid-template-rows: repeat(2, 60px);
  gap: 8px;
  grid-template-columns: 60px 1fr;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.demo-target {
  display: grid;
  grid-template-rows: repeat(2, 60px);
  gap: 8px;
  grid-template-columns: 1fr 2fr;
}

CSS

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  padding: 10px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.item {
  padding: 10px;
  border: 2px solid #245a85;
  background: #b9d7eb;
}
.demo-target {
  display: grid;
  grid-template-rows: repeat(2, 60px);
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

Сравнение при ltr и rtl: grid-template-columns

Явная сетка: три столбца и две строки. Линии — границы дорожек.

Выберите direction (направление письма). Во всех схемах задано writing-mode: horizontal-tb (горизонтальное письмо, строки идут сверху вниз).

Направление письма — direction

ltr — слева направо rtl — справа налево

1234

123456

123

При ltr линии столбцов считаются слева направо, при rtl — справа налево. Линии строк в обоих случаях считаются сверху вниз. Последняя линия явной сетки также имеет номер -1.

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

Спецификации: CSS grid, CSS grid

Поддерживается во всех основных браузерах с 2017 года.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.grid-template-columns
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`grid-template-columns`	✓57	✓16 Версия 16 выпущена в 2017 г. Версия 12 выпущена в 2015 г. — Удалено в 79; Имя -ms-grid-columns	✓52	✓44	✓10.1	✓57	✓52	✓43	✓10.3	✓6.0	✓57	✓10.3
`animation`	✓107	✓107	✓66	✓93	✓16	✓107	✓66	✓73	✓16	✓21.0	✓107	✓16
`auto`	✓57	✓79	✓52	✓44	✓10.1	✓57	✓52	✓43	✓10.3	✓7.0	✓57	✓10.3
`fit-content`	✓57	✓16	✓52	✓44	✓10.1	✓57	✓52	✓43	✓10.3	✓6.0	✓57	✓10.3
`max-content`	✓57	✓79	✓52	✓44	✓10.1	✓57	✓52	✓43	✓10.3	✓7.0	✓57	✓10.3
`min-content`	✓57	✓79	✓52	✓44	✓10.1	✓57	✓52	✓43	✓10.3	✓7.0	✓57	✓10.3
`minmax`	✓57	✓16	✓52	✓44	✓10.1	✓57	✓52	✓43	✓10.3	✓6.0	✓57	✓10.3
`none`	✓57	✓79	✓52	✓44	✓10.1	✓57	✓52	✓43	✓10.3	✓7.0	✓57	✓10.3
`repeat`	✓57	✓16	✓76 Версия 76 выпущена в 2020 г. Версия 57 выпущена в 2017 г. — Удалено в 76; Частичная поддержка Примечание MDN (англ.) `repeat(auto-fill, ...)` and `repeat(auto-fit, ...)` only support one repeated column (see bug 1341507). Версия 52 выпущена в 2017 г. — Удалено в 57; Частичная поддержка Примечание MDN (англ.) `calc()` doesn't work in `repeat()` (see bug 1350069).	✓44	✓10.1	✓57	✓79 Версия 79 выпущена в 2020 г. Версия 57 выпущена в 2017 г. — Удалено в 79; Частичная поддержка Примечание MDN (англ.) `repeat(auto-fill, ...)` and `repeat(auto-fit, ...)` only support one repeated column (see bug 1341507). Версия 52 выпущена в 2017 г. — Удалено в 57; Частичная поддержка Примечание MDN (англ.) `calc()` doesn't work in `repeat()` (see bug 1350069).	✓43	✓10.3	✓6.0	✓57	✓10.3
`subgrid`	✓117	✓117	✓71	✓103	✓16	✓117	✓79	✓78	✓16	✓24.0	✓117	✓16
Ещё 8 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис

CSS

grid-template-columns: none | <track-list> | <auto-track-list> | subgrid <line-name-list>?;

/* Глобальные значения */
grid-template-columns: initial | inherit | unset | revert | revert-layer;

| разделяет варианты. ? означает необязательную часть. Типы в угловых скобках обозначают допустимые значения из таблицы или соответствующих составляющих.

JavaScript:

JavaScript

element.style.gridTemplateColumns="60px 60px";

Начальное значение свойства

none.

Значения свойства

Значения grid-template-columns
Значение	Описание
`none`	Это свойство не задаёт явные дорожки. Их может создать `grid-template-areas`; размеры дорожек, не охваченных списком размеров, задаёт `grid-auto-columns`.
`<length-percentage>`	Неотрицательная длина или процент; ноль допустим. Проценты относятся к внутреннему размеру контейнера по соответствующей оси. При зависимости этого размера от содержимого процентные дорожки участвуют в расчёте внутренних размеров как `auto`.
`<flex>`	Доля свободного пространства в единицах `fr`. Размеры остальных дорожек и промежутков учитываются прежде, чем распределяются доли. `1fr` вне `minmax()` подразумевает автоматический минимум; для разрешения сжатия часто используют `minmax(0, 1fr)`.
`auto`	Минимум зависит от минимальных размеров элементов, максимум — от их предпочтительного содержимого. Такие дорожки могут растягиваться при выравнивании `stretch` по соответствующей оси.
`min-content / max-content`	Наибольший минимальный или предпочтительный вклад элементов в дорожку, а не размер самого маленького или большого DOM-элемента.
`minmax(min, max)`	Диапазон размера. Минимум не может быть в `fr`; максимум может. Если максимум меньше минимума, минимум имеет приоритет.
`fit-content(<length-percentage>)`	Ограничивает предпочтительный размер указанным пределом, но не уменьшает дорожку ниже её автоматического минимума. Это не жёсткий `max-width`.
`[line-name]`	Одно или несколько имён линии в квадратных скобках, например `[content-start]`. Имя линии можно использовать при размещении элемента.
`repeat()`	Повторяет фрагмент списка. Целое положительное число задаёт количество повторений; `auto-fill` и `auto-fit` подбирают его по доступному размеру.
`subgrid`	Вложенный Grid-контейнер использует дорожки родительской сетки по этой оси в пределах занимаемой области. Собственные размеры столбцов по этой оси не задаются; имена линий можно дополнить.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `grid-template-columns` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

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

CSS Grid Layout — спецификация grid-template-columns.

Наследуется

Нет.

Анимируемое

Совместимые списки размеров с одинаковой структурой могут интерполироваться; изменение структуры, именованных режимов или subgrid обычно дискретное.

Примеры, попробуйте сами

Дорожки и промежутки Grid

Попробуйте repeat(3, 1fr). Число столбцов и их ширина изменятся.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Дорожки и промежутки Grid</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item target">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>

style.css

CSS

.container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

Автоматическое число столбцов

Измените минимальную ширину 90px на 140px или измените ширину окна. auto-fit размещает столько столбцов, сколько помещается.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
.item {
    background: #c5dbea;
    padding: 12px;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Автоматическое число столбцов</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
    </div>
  </body>
</html>

style.css

CSS

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
}

Дочерние элементы на линиях родительской сетки

У вложенного блока grid-template-columns: subgrid. Поменяйте соотношение столбцов родителя: оба ряда сохранят общие линии. Замените subgrid на 1fr 1fr 1fr, чтобы увидеть независимые столбцы.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color-scheme: light dark;
    background: Canvas;
    color: CanvasText;
}
.item {
    min-width: 0;
    padding: 8px;
    overflow-wrap: anywhere;
    border: 1px solid #447a9b;
    background: light-dark(#e4f0f8, #293e50);
}
.container {
    outline: 1px dashed;
}
section {
    margin-bottom: 24px;
}
h2 {
    font-size: 16px;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Дочерние элементы на линиях родительской сетки</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item target">2</div>
      <div class="item">3</div>
      <div class="nested">
        <div class="item">A</div>
        <div class="item">B</div>
        <div class="item">C</div>
      </div>
    </div>
  </body>
</html>

style.css

CSS

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 8px;
}
.nested {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
}

CSS свойство grid-template-columns

Определение и применение

Попробуйте значения grid-template-columns

Сравнение при ltr и rtl: grid-template-columns

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

Синтаксис

Начальное значение свойства

Значения свойства

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

Наследуется

Анимируемое

Примеры, попробуйте сами

Дорожки и промежутки Grid

Автоматическое число столбцов

Дочерние элементы на линиях родительской сетки

CSS свойство `grid-template-columns`