grid-auto-columns¶
Свойство grid-auto-columns
определяет размер любых автоматически созданных треков (иначе говоря, неявных треков). Неявные треки создаются при явном позиционировании столбцов и строк (через grid-template-rows
/grid-template-columns
), которые находятся за пределами заданной сетки.
Grid Layout
Синтаксис¶
/* 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;
Значения¶
Значение по-умолчанию: auto
Наследуется: нет
Применяется к контейнерам сетки
Анимируется: нет
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
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;
}
Результат