CSS grid-auto-columns — розмір неявних стовпців
Властивість grid-auto-columns визначає розмір неявно створених стовпчиків сітки.
Визначає розмір будь-яких автоматично сформованих сіткових доріжок (наприклад, неявних сіткових доріжок). Неявні сіткові доріжки створюються, коли ви явно позиціонуєте рядки або стовпці (за допомогою grid-template-rows або grid-template-columns), що знаходяться поза межами визначеної сітки.
Якщо елемент сітки розміщений у стовпці, який за розміром більший за інші стовпці сітки - створюються неявні клітинки сітки для його розміщення. Це може статися або шляхом явного позиціонування в стовпчику, що знаходиться поза межами сітки, або за допомогою алгоритму автоматичного розміщення, створюючи додаткові стовпці.
Щоб зрозуміти, як створюються сіткові доріжки, подивіться на цей приклад:
.box {
display: grid;
grid-auto-columns: 275px;
}
Загальний опис
автор: NagarD
Синтаксис
grid-auto-columns: <track-size> ...;Властивість grid-auto-columns може отримувати єдине значення:
-
<track-size> -
Може бути довжиною, відсотком або часткою вільного місця в сітці (за допомогою спеціальної одиниці вимірювання
fr).Також, доступні для використання такі ключові слова, як
max-content(найбільший можливий розмір),min-content(найменший),minmax(min, max)(визначає діапазон розмірів, що перевищує або дорівнюєminі менше або дорівнюєmax).Також існує функція
автор: Svitlanafit-content(min, max), яка означаєmin(max-content, max(auto, argument)).
| Значення без задання: | auto |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridAutoColumns |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 57 | 70 | 10.1 | 44 | 16 | 10* |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 57 | 57 | 79 | 10.3 |
Приклади
+ запропонувати свій приклад у пісочниці
Жодної колонки в шаблоні немає — їх породжує автопотік, а grid-auto-columns чергує ширини неявних колонок: 1fr, 2fr, 1fr, 2fr.
HTML
<div class="box">
<div>1fr</div>
<div>2fr</div>
<div>1fr</div>
<div>2fr</div>
</div>CSS
.box {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr 2fr;
gap: 4px;
}
.box div {
background: #0172ad;
color: #fff;
padding: 8px;
}Результат роботи
HTML
<div class="box">
<div class="item"><span>275px</span></div>
<div class="item"><span>275px</span></div>
<div class="item"><span>275px</span></div>
</div>CSS
body {
padding: 16px;
font-family: monospace;
font-size: 15px;
line-height: 120px;
text-align: center;
}
.box {
height: 100px;
display: grid;
grid-template-areas: "a a";
grid-gap: 16px;
grid-auto-columns: 275px;
}
.item {
background-color: #f7f7f7;
outline: 4px solid #555;
}Динамічний приклад
HTML
<p>У цьому прикладі, Ви можете змінювати значення (розмір у пікселях) для властивості <strong>grid-auto-columns</strong>:</p>
<input type="number" class="input" min="0" value="50">px
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>CSS
body {
font-family: monospace;
font-size: 18px;
line-height: 1.45;
}
.input {
margin-bottom: 36px;
padding: 4px;
font-size: 18px;
}
.box {
height: 100px;
display: grid;
grid-template-areas: "a a";
grid-gap: 16px;
grid-auto-columns: 50px;
}
.box .item {
background-color: rgba(0, 0, 0, .45);
color: #222;
text-align: center;
font-weight: 700;
font-size: 1.25em;
padding: 16px;
}JS
var input = document.querySelector('.input');
var box = document.querySelector('.box');
input.addEventListener('change', function () {
box.style.gridAutoColumns = this.value + 'px';
}, false);
//# sourceURL=pen.jsГоризонтальна стрічка: grid-auto-flow: column створює неявні стовпці, а grid-auto-columns задає їм однакову ширину.
HTML
<div class="strip">
<div>Картка 1</div>
<div>Картка 2</div>
<div>Картка 3 з довшим текстом</div>
<div>Картка 4</div>
<div>Картка 5</div>
<div>Картка 6</div>
</div>CSS
body {
font-family: sans-serif;
font-size: 14px;
padding: 16px;
}
.strip {
display: grid;
/* без цього рядка зайві картки пішли б у нові РЯДКИ */
grid-auto-flow: column;
grid-auto-columns: 140px;
gap: 10px;
overflow-x: auto;
padding-bottom: 12px;
}
.strip div {
background: #bfd8ff;
border-radius: 4px;
padding: 20px 10px;
text-align: center;
}Коментарі
Коментарів ще немає — будьте першим!