Свойство CSS `grid-auto-columns`

Свойство grid-auto-columns CSS задаёт размер неявно созданной дорожки столбца сетки или шаблона дорожек.

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

Попробуйте

grid-auto-columns: auto;

grid-auto-columns: 1fr;

grid-auto-columns: min-content;

grid-auto-columns: minmax(10px, auto);

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div></div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-auto-rows: 40px;
  grid-gap: 10px;
  width: 220px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
}

#example-element > div:nth-child(1) {
  grid-column: 1 / 3;
}

#example-element > div:nth-child(2) {
  grid-column: 2;
}

Синтаксис

/* Keyword values */
grid-auto-columns: min-content;
grid-auto-columns: max-content;
grid-auto-columns: auto;

/* <length> values */
grid-auto-columns: 100px;
grid-auto-columns: 20cm;
grid-auto-columns: 50vmax;

/* <percentage> values */
grid-auto-columns: 10%;
grid-auto-columns: 33.3%;

/* <flex> values */
grid-auto-columns: 0.5fr;
grid-auto-columns: 3fr;

/* minmax() values */
grid-auto-columns: minmax(100px, auto);
grid-auto-columns: minmax(max-content, 2fr);
grid-auto-columns: minmax(20%, 80vmax);

/* fit-content() values */
grid-auto-columns: fit-content(400px);
grid-auto-columns: fit-content(5cm);
grid-auto-columns: fit-content(20%);

/* multiple track-size values */
grid-auto-columns: min-content max-content auto;
grid-auto-columns: 100px 150px 390px;
grid-auto-columns: 10% 33.3%;
grid-auto-columns: 0.5fr 3fr 1fr;
grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr)
  minmax(20%, 80vmax);
grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);

/* Global values */
grid-auto-columns: inherit;
grid-auto-columns: initial;
grid-auto-columns: revert;
grid-auto-columns: revert-layer;
grid-auto-columns: unset;

Значения

<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> )

<track-breadth> = 
  <length-percentage> |
  <flex> |
  min-content |
  max-content |
  auto

<inflexible-breadth> = 
  <length-percentage> |
  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
• Автоматическое размещение в сеточной раскладке: задание размеров строк в неявной сетке
• Видео: Знакомство с автоматическим размещением и порядком элементов сетки