This page is being translated; the original is shown (Русский ).
Автоматическое формирование сетки
Классы grid-flow-* задают grid-auto-flow: в каком направлении
грид-контейнер раскладывает элементы, которым не задано место, и заполняет ли
он пропуски. Берите их, чтобы раскладывать элементы по колонкам или плотно
упаковывать карточки разной ширины.
Пример
Строки и колонки
С grid-flow-row элементы заполняют строку и переходят на следующую; с
grid-flow-col заполняют колонку сверху вниз — здесь в сетке из двух строк.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 sm:grid-col-2 gap-4 color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >grid-flow-row</code >
<div class ="grid grid-col-3 grid-flow-row gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >3</span >
<span class ="p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >4</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >5</span >
<span class ="p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >6</span >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >grid-flow-col grid-row-2</code >
<div class ="grid grid-row-2 grid-flow-col gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >3</span >
<span class ="p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >4</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >5</span >
<span class ="p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >6</span >
</div >
</div >
</div >
Заполнение пропусков
Элементы 2 и 3 широкие. Без уплотнения после них в строке остаются пустые
ячейки; с grid-flow-row-dense в пропуски встают следующие элементы, и
видимый порядок меняется.
grid-flow-row
1
2 — col-span-2
3 — col-span-2
4
5
6
grid-flow-row-dense
1
2 — col-span-2
3 — col-span-2
4
5
6
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-col gap-3 color-on-surface" >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >grid-flow-row</code >
<div class ="grid grid-col-4 grid-flow-row gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="col-span-2 p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2 — col-span-2</span >
<span class ="col-span-2 p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >3 — col-span-2</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >4</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >5</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >6</span >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >grid-flow-row-dense</code >
<div class ="grid grid-col-4 grid-flow-row-dense gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >1</span >
<span class ="col-span-2 p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >2 — col-span-2</span >
<span class ="col-span-2 p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >3 — col-span-2</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >4</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >5</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >6</span >
</div >
</div >
</div >
Классы
Класс
CSS
Значения
grid-flow-rowgrid-auto-flow: row—
grid-flow-colgrid-auto-flow: column—
grid-flow-row-densegrid-auto-flow: row dense—
grid-flow-col-densegrid-auto-flow: column dense—
Условия (что это ): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:grid-flow-row.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Как выбрать
grid-flow-row — по строкам; значение по умолчанию у грид-контейнера.
Класс нужен, чтобы вернуть его на другой ширине экрана.grid-flow-col — по колонкам. Число строк задайте шаблоном
grid-row-*grid-flow-row-dense и grid-flow-col-dense — то же, но элементы
заполняют пропуски, оставленные широкими соседями.
Плотная галерея
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-4 grid-flow-row-dense gap-2" >
<figure class ="col-span-2" >Широкое фото</figure >
<figure class ="col-span-3" >Панорама</figure >
<figure >Фото</figure >
<figure >Фото</figure >
</div >
Ограничения
С уплотнением видимый порядок расходится с порядком разметки, по которому
идут фокус клавиатуры и программы экранного доступа. Не используйте его там,
где порядок важен: в списках ссылок, формах, шагах.
См. также
Предыдущая Автоматическая ширина столбцов сетки Следующая Автоматический размер строк сетки
