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

Алгоритм автоматичного розміщення, щоб заповнити кожен рядок по черзі, додаючи нові рядки за необхідності.

автор: Svitlana

правити

column

Алгоритм автоматичного розміщення, щоб по черзі заповнювати кожен стовпчик, при необхідності додаючи нові стовпці.

автор: Svitlana

правити

dense

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

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	57	52	10.1	44	16	—

Підтримка: мобільні переглядачі

Переглядач
	57	57	52	10.3

Приклади

+ запропонувати свій приклад у пісочниці

<p>grid-auto-flow: row</p>
<div class="box row">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>
<p>grid-auto-flow: column</p>
<div class="box col">
    <div>1</div><div>2</div><div>3</div><div>4</div>
</div>

.box {
    display: grid;
    grid-template: repeat(2, 40px) / repeat(2, 1fr);
    gap: 4px;
}

.row { grid-auto-flow: row; }
.col { grid-auto-flow: column; }

.box div {
    background: #0172ad;
    color: #fff;
    padding: 8px;
}