Flexbox & Grid
間距
用於控制網格和彈性盒項目之間間距的工具類別。
| 類別 | 樣式 |
|---|---|
gap-<數字> | gap: calc(var(--spacing) * <值>); |
gap-(<自訂屬性>) | gap: var(<自訂屬性>); |
gap-[<值>] | gap: <值>; |
gap-x-<數字> | column-gap: calc(var(--spacing) * <值>); |
gap-x-(<自訂屬性>) | column-gap: var(<自訂屬性>); |
gap-x-[<值>] | column-gap: <值>; |
gap-y-<數字> | row-gap: calc(var(--spacing) * <值>); |
gap-y-(<自訂屬性>) | row-gap: var(<自訂屬性>); |
gap-y-[<值>] | row-gap: <值>; |
範例
基本範例
使用 gap-<數字> 工具類別，如 gap-2 和 gap-4 來變更網格和彈性盒佈局中列和欄之間的間距
01
02
03
04
<div class="grid grid-cols-2 gap-4"> <div>01</div> <div>02</div> <div>03</div> <div>04</div></div>獨立變更列和欄間距
使用 gap-x-<數字> 和 gap-y-<數字> 工具類別，如 gap-x-8 和 gap-y-4 來獨立變更欄和列之間的間距
01
02
03
04
05
06
<div class="grid grid-cols-3 gap-x-8 gap-y-4"> <div>01</div> <div>02</div> <div>03</div> <div>04</div> <div>05</div> <div>06</div></div>使用自訂值
使用類似以下的工具類別 gap-[<值>],gap-x-[<值>],和 gap-y-[<值>]來設定間距基於完全自訂的值
<div class="gap-[10vw] ..."> <!-- ... --></div>對於 CSS 變數，您也可以使用 間距-(<自訂屬性>) 語法
<div class="gap-(--my-gap) ..."> <!-- ... --></div>這只是 間距-[var(<自訂屬性>)] 的簡寫，會自動為您新增 var() 函式。
響應式設計
前綴 gap,column-gap,和 row-gap工具類別 使用像是 md: 這樣的斷點變體，僅在中 螢幕尺寸及以上套用此工具類別
<div class="grid gap-4 md:gap-6 ..."> <!-- ... --></div>在變體說明文件中了解更多關於使用變體的信息。
