Lzh on GitHub

grid-auto-flow

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

快速参考

类名样式
grid-flow-rowgrid-auto-flow: row;
grid-flow-colgrid-auto-flow: column;
grid-flow-densegrid-auto-flow: dense;
grid-flow-row-densegrid-auto-flow: row dense;
grid-flow-col-densegrid-auto-flow: column dense;
为grid布局父容器属性。

示例

基本示例

使用 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>

响应式设计

使用断点变体（例如 md:）作为 grid-auto-flow 实用工具的前缀，以便仅在中等尺寸及以上的屏幕上应用该实用工具：

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

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