css властивість grid-auto-flow
Властивість grid-auto-flow визначає, як працює алгоритм автоматичного розміщення, точно визначаючи, як будуть розміщені елементи у сітці.
Властивість grid-auto-flow впливає лише на елементів у сітці, які розміщуються в неявно створених треках. Елементи сітки, які не розміщені безпосередньо у певному місці, розміщуються автоматично в незайнятому місці. Ця властивість визначає, як саме ці елементи мають бути розміщені.
Ключове слово dense може стати в нагоді, якщо у вашій сітці є елементи з різними розмірами. Як правило, сітка просто розмістить ці елементи у порядку їх розташування у коді. Якщо всі об'єкти сітці мають один і той же розмір, і вони вписуються в одну доріжку, це зазвичай призводить до рівномірно розподіленої сітці з елементами сітки.
Але якщо деякі елементи сітки більші за іншіі, то ви можете отримати сітку, в якій елементи переходять на наступний рядок, коли ще залишається немало вільного місця до кінці у цьому рядку, і сітка виглядає трохи "зубчасто" та негарно.
Ось приклад такої поведінки сітки:
Два елементи (2 і 3) ширші за інші й тому роблять хаос у розміщенні. А якщо для сітки застосувати ключове слово dense:
Пустий простір заповнюється маленькими елементами.
Синтаксис
grid-auto-flow: [ row | column ] || dense;Властивість grid-auto-flow може отримувати 3 значення:
rowАлгоритм автоматичного розміщення, щоб заповнити кожен рядок по черзі, додаючи нові рядки за необхідності.
columnАлгоритм автоматичного розміщення, щоб по черзі заповнювати кожен стовпчик, при необхідності додаючи нові стовпці.
denseАлгоритм автоматичного розміщення, який полягає на заповненні пустої клітинки раніше в сітці, якщо пізніше з'являться менші елементи.
| Значення без задання: | row |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.gridAutoFlow |
Переглядачі
| Переглядач | ||||||
|---|---|---|---|---|---|---|
| grid-auto-flow | 57.0 |
Не підтримується |
52.0 |
10.1 |
44.0 |
16.0 |
| Переглядач | |||
|---|---|---|---|
| grid-auto-flow | 57.0 |
52.0 |
10.3 |
Мобільних переглядачів ще не додано.
Приклади
Динамічний приклад
Динамічний приклад
З dense
Без dense
Простий приклад
Синтаксис властивості
.box {
display: grid;
grid-auto-flow: column;
}