1. Flexbox и Grid
  2. grid-auto-flow

Flexbox и Grid

grid-auto-flow

Утилиты для управления тем, как элементы в сетке автоматически размещаются.

ClassStyles
grid-flow-row
grid-auto-flow: row;
grid-flow-col
grid-auto-flow: column;
grid-flow-dense
grid-auto-flow: dense;
grid-flow-row-dense
grid-auto-flow: row dense;
grid-flow-col-dense
grid-auto-flow: column dense;

Примеры

Базовый пример

Используйте утилиты типа grid-flow-col и grid-flow-row-dense для управления тем, как работает алгоритм автоматического размещения для макета сетки:

01
02
03
04
05
<div class="grid grid-flow-row-dense grid-cols-3 grid-rows-3 ...">  <div class="col-span-2">01</div>  <div class="col-span-2">02</div>  <div>03</div>  <div>04</div>  <div>05</div></div>

Адаптивный дизайн

Префикс a grid-auto-flow утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<div class="grid grid-flow-col md:grid-flow-row ...">  <!-- ... --></div>

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков