Атрибут grid-auto-columns в CSS

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

grid-auto-columns свойство устанавливает размер столбцов в контейнере сетки.

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

Дополнительная информация:

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

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

Пример

Установитеdefault размер столбца для сетки:

.grid-container {
  display: grid;
  grid-auto-columns: 50px;
}

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

Синтаксис CSS

grid-auto-columns: auto|max-content|min-content|length;

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

Значение Описание
auto Default. Размер столбца определяется размером контейнера.
fit-content()
max-content Установите размер каждого столбца на основе максимального элемента в столбце.
min-content Установите размер каждого столбца на основе минимального элемента в столбце.
minmax(min.max) Установите диапазон размеров, который больше или равен min и меньше или равен max.
length Установите размер столбца, используя легитимные значения длины. См. такжеЕдиницы измерения.
% Установите размер столбца, используя проценты.

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

Default: auto
Инherit: Нет
Создание анимации: Поддерживается. См. также:Свойства анимации.
Версия: CSS Grid Layout Module Level 1
Синтаксис JavaScript: object.style.gridAutoColumns="120px"

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

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

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