css властивість grid-auto-columns


Властивість grid-auto-columns визначає розмір неявно створених стовпчиків сітки.

ластивість `grid-auto-columns`

Визначає розмір будь-яких автоматично сформованих сіткових доріжок (наприклад, неявних сіткових доріжок). Неявні сіткові доріжки створюються, коли ви явно позиціонуєте рядки або стовпці (за допомогою grid-template-rows або grid-template-columns), що знаходяться поза межами визначеної сітки.

Якщо елемент сітки розміщений у стовпці, який за розміром більший за інші стовпці сітки - створюються неявні клітинки сітки для його розміщення. Це може статися або шляхом явного позиціонування в стовпчику, що знаходиться поза межами сітки, або за допомогою алгоритму автоматичного розміщення, створюючи додаткові стовпці.

Щоб зрозуміти, як створюються сіткові доріжки, подивіться на цей приклад:

.box {

  display: grid;

  grid-auto-columns: 275px;

}

Синтаксис

grid-auto-columns: <track-size> ...;

Властивість grid-auto-columns може отримувати одне значення:

<track-size>

Може бути довжиною, відсотком або часткою вільного місця в сітці (за допомогою спеціальної одиниці вимірювання fr).

Також, доступні для використання такі ключові слова, як max-content (найбільший можливий розмір), min-content (найменший), minmax(min, max) (визначає діапазон розмірів, що перевищує або дорівнює min і менше або дорівнює max).

Також існує функція fit-content(min, max), яка означає min(max-content, max(auto, argument)).

Значення без задання: auto
Наслідує: Ні
Анімується: Так
JavaScript синтаксис: object.style.gridAutoColumns

Переглядачі

Переглядач
grid-auto-columns

57.0

10.0

52.0

10.1

44.0

16.0

Переглядач
grid-auto-columns

57.0

52.0

10.3


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад

Результат роботи

Синтаксис

.box {


  grid-auto-columns: 1fr 2fr;


}

Додаткові посилання