Flexbox & Grid
用於控制 grid 中元素如何自動放置的通用類別。
| Class | Styles |
|---|---|
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 等通用類別來控制 grid 佈局的自動放置演算法如何運作：
<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>在 grid-auto-flow 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<div class="grid grid-flow-col md:grid-flow-row ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。