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

Определение и использование

Свойство grid-template-columns определяет количество столбцов (и ширину) в сеточной разметке.

Эти значения представляют собой список, разделенный пробелами, где каждое значение specifies the size of the corresponding column.

См. также:

CSS учебник:CSS сеточная разметка

CSS справочник:Свойство grid-template-rows

CSS справочник:Свойство grid-template

Пример

Пример 1

Создайте контейнер с четырьмя столбцами:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

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

Пример 2

Создайте сетку с четырьмя столбцами и определите размер каждого столбца:

.grid-container {
  display: grid;
  grid-template-columns: 30px 200px auto 100px;
}

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

CSS синтаксис

grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;

Значение атрибута

Значение Описание
none Значение по умолчанию. Создавайте столбцы по мере необходимости.
auto Размер столбца зависит от размера контейнера и размера содержимого элементов в столбце.
max-content Определите размер каждого столбца на основе самого большого элемента в столбце.
min-content Определите размер каждого столбца на основе самого маленького элемента в столбце.
length Установите размер столбцов, используя легитимные значения длины. См. также:Единицы измерения.
initial Установить этот атрибут в его значение по умолчанию. См. также: initial.
inherit Этот атрибут наследуется из родительского элемента. См. также: inherit.

Технические детали

Значение по умолчанию: none
Инheritance: нет
Анимация: Поддерживается. См. также:Анимационные свойства.
Версия: CSS Grid Layout Module Level 1
JavaScript синтаксис: object.style.gridTemplateColumns="50px 50px 50px"

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44