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


Властивість grid-auto-flow визначає, як працює алгоритм автоматичного розміщення, точно визначаючи, як будуть розміщені елементи у сітці.

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

Властивість grid-auto-flow впливає лише на елементів у сітці, які розміщуються в неявно створених треках. Елементи сітки, які не розміщені безпосередньо у певному місці, розміщуються автоматично в незайнятому місці. Ця властивість визначає, як саме ці елементи мають бути розміщені.

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

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

Ось приклад такої поведінки сітки:

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

Два елементи (2 і 3) ширші за інші й тому роблять хаос у розміщенні. А якщо для сітки застосувати ключове слово dense:

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

Пустий простір заповнюється маленькими елементами.

Синтаксис

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;


}

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