grid-auto-columns CSS

Свойство grid-auto-columns определяет размер любых автоматически созданных треков (иначе говоря, неявных треков). Неявные треки создаются при явном позиционировании столбцов и строк (через grid-template-rows/grid-template-columns), которые находятся за пределами заданной сетки.

Свойство **`grid-auto-columns`** определяет размер любых автоматически созданных треков (иначе говоря, неявных треков). Неявные треки создаются при явном позиционировании столбцов и строк (через [`grid-template-rows`](/css/grid-template-rows/)/[`grid-template-columns`](/css/grid-template-columns/)), которые находятся за пределами заданной сетки.
Значение по умолчанию:

auto

Значение по умолчанию:
`auto`
Наследуется:
Нет
Применяется:

к контейнерам сетки

Применяется:
к контейнерам сетки
Анимируется:
Нет
Спецификации:
Спецификации:
* [CSS Grid Layout](https://drafts.csswg.org/css-grid/#propdef-grid-auto-columns)
Поддержка браузерами:

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

Поддержка браузерами:
<p class="ciu_embed" data-feature="css-grid" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=css-grid">Can I Use css-grid?</a> Data on support for the css-grid feature across the major browsers from caniuse.com. </p>

Синтаксис

/* 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: unset;

Синтаксис

/* 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: unset;

Значения

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

  • Реализована за флагом экспериментальной веб-платформы в флагах chrome:// с Chrome 29.0
  • Реализовано за флагом layout.css.grid.enabled с Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), по умолчанию — false. Начиная с Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) он включен по умолчанию.
  • Internet Explorer и Edge реализуют более старую версию спецификации, используя свойство -ms-grid-columns.
  • Реализовано за флагом Enable Experion Web Platform в флагах chrome://, начиная с Opera 28.0

Значения

### Поддержка браузерами * Реализована за флагом экспериментальной веб-платформы в флагах chrome:// с Chrome 29.0 * Реализовано за флагом layout.css.grid.enabled с Gecko 40.0 (Firefox 40.0 / Thunderbird 40.0 / SeaMonkey 2.37), по умолчанию -- false. Начиная с Gecko 52.0 (Firefox 52.0 / Thunderbird 52.0 / SeaMonkey 2.49) он включен по умолчанию. * Internet Explorer и Edge реализуют более [старую версию спецификации](https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-columns-and-rows-properties), используя свойство `-ms-grid-columns`. * Реализовано за флагом Enable Experion Web Platform в флагах chrome://, начиная с Opera 28.0

Примеры

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";
  grid-gap: 10px;
  grid-auto-columns: 200px;
}

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

Результат

Пример использования свойства grid-auto-columns
Пример использования свойства grid-auto-columns

Примеры

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"; grid-gap: 10px; grid-auto-columns: 200px; } #grid > div { background-color: lime; } Результат ![Пример использования свойства grid-auto-columns](https://xsltdev.ru/workspace/uploads/css/grid-auto-columns.png)

Содержание

  • Синтаксис
      /* 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: unset;
  • Значения
    • Примеры
        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"; grid-gap: 10px; grid-auto-columns: 200px; } #grid > div { background-color: lime; } Результат ![Пример использования свойства grid-auto-columns](https://xsltdev.ru/workspace/uploads/css/grid-auto-columns.png)

    В начало