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

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

Почему это важно: При построении сетки обычно задаётся фиксированное количество треков. Но если элемент попадает в несуществующий столбец (например, при grid-column: 5 в сетке из 3 столбцов), CSS Grid автоматически создаёт этот дополнительный столбец. По умолчанию такие автоматически созданные столбцы имеют размер auto, что нередко сжимает их до размера содержимого. Свойство grid-auto-columns позволяет управлять их шириной.

Примечание: Это свойство влияет только на неявно создаваемые столбцы, но не на явно определённые. Для задания размера столбцов, объявленных заранее, используйте grid-template-columns. Аналогом для строк является grid-auto-rows.

Когда создаются неявные столбцы?

Неявные столбцы появляются в двух типичных ситуациях:

Элемент расположен за пределами последней явной линии столбца (например, grid-column-start: 4 при наличии только 3 столбцов).
В сетке используется grid-auto-flow: column, и новые элементы размещаются в свежесозданных столбцах вместо строк.

В обоих случаях ширина новых столбцов определяется свойством grid-auto-columns.

Начальное значение	auto
Применяется к	Контейнерам сетки.
Наследуется	Нет.
Анимируемость	Да. Размер столбцов поддаётся анимации.
Версия	CSS Grid Layout Module Level 1
DOM-синтаксис	object.style.gridAutoColumns = "100px";

Синтаксис

Синтаксис CSS свойства grid-auto-columns

grid-auto-columns: auto | max-content | min-content | length | % | minmax(min, max);

Пример grid-auto-columns:

Пример CSS свойства grid-auto-columns со значениями auto и length

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-auto-columns: 50px;
        gap: 10px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .black-container {
        display: grid;
        grid-auto-columns: 100px;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .black-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-columns: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #999;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-columns property example</h2>
    <h3>50 pixels</h3>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>100 pixels</h3>
    <div class="black-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

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

Результат

В следующем примере свойство grid-auto-columns используется для задания размера по умолчанию (ширины) всех столбцов.

Пример grid-auto-columns со всеми значениями:

Пример CSS свойства grid-auto-columns со значениями max-content, min-content, auto и length

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid-auto-columns: 50px;
        gap: 10px;
        background-color: #555;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .black-container {
        display: grid;
        grid-auto-columns: 100px;
        gap: 10px;
        background-color: #000;
        padding: 10px;
      }
      .black-container > div {
        background-color: #ccc;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .grey-container {
        display: grid;
        grid-auto-columns: max-content;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .grey-container > div {
        background-color: #555;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .white-container {
        display: grid;
        grid-auto-columns: min-content;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .white-container > div {
        background-color: #fff;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .auto-container {
        display: grid;
        grid-auto-columns: auto;
        gap: 10px;
        background-color: #ccc;
        padding: 10px;
      }
      .auto-container > div {
        background-color: #999;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
      .minmax-container {
        display: grid;
        grid-auto-columns: minmax(50px, 1fr);
        gap: 10px;
        background-color: #eee;
        padding: 10px;
      }
      .minmax-container > div {
        background-color: #777;
        text-align: center;
        padding: 20px 0;
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h2>Grid-auto-columns property example</h2>
    <p>Use the grid-auto-columns property to set a default size (width) for all columns.</p>
    <h3>50 pixels</h3>
    <div class="grid-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>100 pixels</h3>
    <div class="black-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>max-content</h3>
    <div class="grey-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>min-content</h3>
    <div class="white-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>auto</h3>
    <div class="auto-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
    <h3>minmax(50px, 1fr)</h3>
    <div class="minmax-container">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

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

Значения

Значение	Описание
auto	Размер столбцов определяется содержимым или доступным пространством. Это значение по умолчанию.
max-content	Размер каждого столбца определяется наибольшим вкладом min-content его элементов.
min-content	Размер каждого столбца определяется наименьшим вкладом min-content его элементов.
minmax(min, max)	Диапазон размера больше или равен «min» и меньше или равен «max».
length	Размер столбцов задаётся значением длины.
%	Размер столбцов задаётся в процентах.

Также можно передать разделённый пробелами список размеров (например, grid-auto-columns: 100px 200px). Список повторяется по порядку для каждого нового неявного столбца.

Связанные свойства

grid-auto-rows — аналогичная идея для неявно создаваемых строк.
grid-auto-flow — управляет тем, создают ли автоматически размещаемые элементы новые строки или столбцы.
grid-template-columns — определяет явные столбцы.
grid — сокращённое свойство, объединяющее свойства разметки сетки.

Практика

Что делает свойство 'grid-auto-columns' в CSS?

Используется для задания размера неявно созданных столбцов сетки.Используется для изменения цвета столбцов сеткиУправляет высотой строк сеткиРаботает совместно с 'grid-template-areas' и 'grid-auto-flow' для обращения к столбцам сетки.