grid-auto-flow

用于控制网格中元素如何自动放置的工具类。

快速参考

类	属性
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

<!-- [!code classes:grid-flow-row-dense] -->
<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>

响应式设计

使用 md: 等断点变体作为 grid-auto-flow 工具类的前缀，即可只在中等屏幕尺寸及以上生效：

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

在变体文档中了解有关使用变体的更多信息。