Розуміння автоматичного розміщення та grid-auto-flow

У CSS Grid алгоритм автоматичного розміщення визначає, як елементи сітки автоматично розташовуються, якщо ви явно не вказуєте їхнє місце. Цей процес контролюється властивістю grid-auto-flow, яка визначає, чи елементи розміщуються по рядках чи по стовпцях, а також чи повинен браузер намагатися щільніше заповнювати порожні місця. За замовчуванням елементи сітки розміщуються у порядку рядків: кожен елемент займає наступну доступну комірку в поточному рядку, перш ніж перейти до наступного. Властивість grid-auto-flow може мати значення row, column або dense, кожне з яких по-різному впливає на макет.

Основні моменти:

• Алгоритм автоматичного розміщення керує позиціонуванням елементів, якщо ви не вказуєте місце;
• Властивість grid-auto-flow визначає, чи елементи розміщуються по рядках чи по стовпцях;
• Використовуйте ключове слово dense для щільнішого заповнення, щоб займати прогалини, залишені явно розміщеними або більшими елементами;
• Поведінка за замовчуванням — row порядок, заповнення кожного рядка перед переходом до наступного;
• Зміна grid-auto-flow впливає на те, як ваша сітка адаптується до вмісту та порядку елементів.

Примітка

Перемикання між grid-auto-flow: row, grid-auto-flow: column та grid-auto-flow: row dense впливає на розміщення елементів сітки A–E, коли один з елементів (C) розташований явно. Розташування та щільність елементів змінюватимуться залежно від обраного режиму потоку.

Автоматичне розміщення та явно позиціоновані елементи

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

Поради для динамічних макетів з авто-розміщенням

Щоб максимально ефективно використовувати авто-розміщення у динамічних або контент-орієнтованих макетах:

• Використовуйте grid-auto-flow: row для традиційного заповнення сітки по рядках;
• Перемикайтеся на grid-auto-flow: column, якщо потрібно, щоб елементи заповнювали спочатку стовпці, а потім рядки;
• Додавайте dense до будь-якого режиму, якщо бажаєте, щоб браузер заповнював менші прогалини, залишені явно розміщеними або більшими елементами;
• Поєднуйте явне розміщення для особливих елементів з авто-розміщенням для решти, щоб забезпечити і контроль, і гнучкість;
• Перевіряйте макет з різними порядками та кількістю контенту, щоб переконатися, що ваша сітка адаптується, як очікується.