grid-auto-columns

Свойство grid-auto-columns используется для определения размера неявно созданной дорожки колонки в гридах.

Краткая информация

Значение по умолчанию auto
Наследуется Нет
Применяется К грид-контейнеру
Анимируется Нет

Синтаксис

grid-auto-columns: auto | <размер> | <проценты> | min-content | max-content | minmax()
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

auto
Автоматически определяет ширину колонки.
<размер>
Ширина колонки задаётся с помощью единиц размер CSS, вроде px, em, rem и др.
<проценты>
Ширина колонки задаётся в виде процентов от внутреннего размера грид-контейнера в строчном направлении.
min-content
Ширина колонки равна минимальной высоте их содержимого.
max-content
Ширина колонки равна максимальной высоте их содержимого.
minmax(min, max)
Определяет диапазон размеров, больший или равный min и меньший или равный max.

Пример

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>grid-auto-columns</title> <style> .container { display: grid; /* Сетка */ grid-template-columns: repeat(2, 1fr); /* Две колонки */ grid-auto-columns: fit-content; /* Ширина соответствует содержимому */ gap: 1rem; /* Расстояние между карточками */ } .card { background-color: #f0f0f0; /* Цвет фона */ border: 1px solid #ccc; /* Параметры рамки */ border-radius: 5px; /* Скругление углов */ padding: 10px; /* Расстояние от текста до края */ text-align: center; /* Текст по центру */ } .card-image > img { border: 2px solid #ccc; /* Параметры рамки */ } </style> </head> <body> <div class="container"> <div class="card"> <div class="card-image"><img src="image/thumb1.webp" width="150" alt=""></div> <div class="card-title">Шато-де-Флёр</div> </div> <div class="card"> <div class="card-image"><img src="image/thumb2.webp" width="150" alt=""></div> <div class="card-title">Купеческий клуб</div> </div> <div class="card"> <div class="card-image"><img src="image/thumb3.webp" width="150" alt=""></div> <div class="card-title">Михайловский монастырь</div> </div> <div class="card"> <div class="card-image"><img src="image/thumb4.webp" width="150" alt=""></div> <div class="card-title">Польский костёл</div> </div> </div> </body> </html>

Объектная модель

Объект.style.gridAutoColumns

Примечание

Internet Explorer до версии 12 и Edge до версии 16 поддерживают нестандартное свойство -ms-grid-columns.

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

Браузеры

10 16 57 44 10.1 70
57 79 43 10.3

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

См. также