grid-auto-columns

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

<length>

Представляет собой ненулевую длину.

<percentage>

Представляет собой ненулевое <percentage> значение, относительное к размеру блока контейнера сетки. Если размер блока контейнера сетки неопределён, значение в процентах обрабатывается как auto.

<flex>

Представляет собой ненулевой размер с единицей fr, определяющей коэффициент растяжения дорожки. Каждая дорожка, размером <flex>, занимает часть оставшегося пространства пропорционально своему коэффициенту растяжения.

При использовании вне обозначения minmax(), подразумевается автоматический минимум (т.е. minmax(auto, <flex>)).

max-content

Это ключевое слово, представляющее максимальный вклад в размер дорожки со стороны содержимого элементов сетки, занимающих эту дорожку.

min-content

Это ключевое слово, представляющее минимальный вклад в размер дорожки со стороны содержимого элементов сетки, занимающих эту дорожку.

minmax(min, max)

Это функциональная запись, которая определяет диапазон размеров, не меньший, чем min, и не больший, чем max. Если max меньше min, то max игнорируется, и функция обрабатывается как min. В качестве максимального значения, значение <flex> устанавливает коэффициент растяжения дорожки. В качестве минимального значения, оно обрабатывается как ноль (или минимальное содержимое, если размер контейнера сетки ограничен минимальным размером содержимого).

fit-content( [ <length> | <percentage> ] )

Представляет формулу min(max-content, max(auto, argument)), которая вычисляется аналогично auto (т.е. minmax(auto, max-content)), за исключением того, что размер дорожки ограничен значением argument, если он больше минимального auto значения.

auto

В качестве максимального значения представляет собой максимальный размер max-content элементов в этой дорожке.

В качестве минимального значения представляет собой максимальный минимальный размер элементов в этой дорожке (заданный свойством min-width/min-height элементов). Это часто, но не всегда, минимальный min-content размер.

Если используется вне обозначения minmax(), auto представляет собой диапазон между минимальным и максимальным значениями, описанными выше. В большинстве случаев это ведет себя аналогично minmax(min-content,max-content).

Примечание: размеры дорожек, заданные как auto, (и только дорожек, заданных как auto ) могут быть растянуты свойствами align-content и justify-content. Поэтому по умолчанию дорожка размером auto займет всё оставшееся пространство в контейнере сетки.

grid-auto-columns = 
  <track-size>+  

<track-size> = 
  <track-breadth>                                   |
  minmax( <inflexible-breadth> , <track-breadth> )  |
  fit-content( <length-percentage [0,∞]> )          

<track-breadth> = 
  <length-percentage [0,∞]>  |
  <flex [0,∞]>               |
  min-content                |
  max-content                |
  auto                       

<inflexible-breadth> = 
  <length-percentage [0,∞]>  |
  min-content                |
  max-content                |
  auto                       

<length-percentage> = 
  <length>      |
  <percentage>  

HTML

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

CSS

#grid {
  height: 100px;
  display: grid;
  grid-template-areas: "a a";
  gap: 10px;
  grid-auto-columns: 200px;
}

#grid > div {
  background-color: lime;
}

Результат

• grid-auto-rows
• grid-auto-flow
• grid
• Автоматическое размещение в сетке: определение размеров строк в неявной сетке
• Видео: Введение в автоматическое размещение и порядок сетки