Flexbox & Grid
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
<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: 這樣的斷點變體，僅在中等 螢幕尺寸及以上時套用實用程式
<div class="grid grid-flow-col md:grid-flow-row ..."> <!-- ... --></div>請參閱變體文件，以瞭解有關使用變體的更多資訊。
