- Layout
- columns
Layout
columns
用於控制元素內欄數的通用類別。
| Class | Styles |
|---|---|
columns-<number> | columns: <number>; |
columns-3xs | columns: var(--container-3xs); /* 16rem (256px) */ |
columns-2xs | columns: var(--container-2xs); /* 18rem (288px) */ |
columns-xs | columns: var(--container-xs); /* 20rem (320px) */ |
columns-sm | columns: var(--container-sm); /* 24rem (384px) */ |
columns-md | columns: var(--container-md); /* 28rem (448px) */ |
columns-lg | columns: var(--container-lg); /* 32rem (512px) */ |
columns-xl | columns: var(--container-xl); /* 36rem (576px) */ |
columns-2xl | columns: var(--container-2xl); /* 42rem (672px) */ |
columns-3xl | columns: var(--container-3xl); /* 48rem (768px) */ |
columns-4xl | columns: var(--container-4xl); /* 56rem (896px) */ |
columns-5xl | columns: var(--container-5xl); /* 64rem (1024px) */ |
columns-6xl | columns: var(--container-6xl); /* 72rem (1152px) */ |
columns-7xl | columns: var(--container-7xl); /* 80rem (1280px) */ |
columns-auto | columns: auto; |
columns-(<custom-property>) | columns: var(<custom-property>); |
columns-[<value>] | columns: <value>; |
範例（Examples）
依數量設定（Setting by number）
使用 columns-<number> 通用類別（如 columns-3）來設定元素內內容應建立的欄數：
<div class="columns-3 ..."> <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" /> <img class="aspect-square ..." src="/img/mountains-2.jpg" /> <img class="aspect-square ..." src="/img/mountains-3.jpg" /> <!-- ... --></div>欄寬會自動調整以容納指定的欄數。
依寬度設定（Setting by width）
使用 columns-xs 和 columns-sm 等通用類別來設定元素內內容的理想欄寬：
調整範例大小以查看預期行為
<div class="columns-3xs ..."> <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" /> <img class="aspect-square ..." src="/img/mountains-2.jpg" /> <img class="aspect-square ..." src="/img/mountains-3.jpg" /> <!-- ... --></div>當設定欄寬時，欄數會自動調整以確保它們不會太窄。
設定欄間距（Setting the column gap）
使用 gap-<width> 通用類別來指定欄之間的寬度：
<div class="columns-3 gap-8 ..."> <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" /> <img class="aspect-square ..." src="/img/mountains-2.jpg" /> <img class="aspect-square ..." src="/img/mountains-3.jpg" /> <!-- ... --></div>在 gap 文件中了解更多關於 gap 通用類別的資訊。
使用自訂值（Using a custom value）
使用 columns-[<value>] 語法，根據完全自訂的值來設定 columns：
<div class="columns-[30vw] ..."> <!-- ... --></div>對於 CSS 變數，你也可以使用 columns-(<custom-property>) 語法：
<div class="columns-(--my-columns) ..."> <!-- ... --></div>這只是 columns-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。
響應式設計（Responsive design）
在 columns 通用類別前面加上像 sm: 這樣的中斷點變體，讓該通用類別只在小型螢幕尺寸及以上時套用：
調整範例大小以查看預期行為
<div class="columns-2 gap-4 sm:columns-3 sm:gap-8 ..."> <img class="aspect-3/2 ..." src="/img/mountains-1.jpg" /> <img class="aspect-square ..." src="/img/mountains-2.jpg" /> <img class="aspect-square ..." src="/img/mountains-3.jpg" /> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。
自訂主題（Customizing your theme）
使用 --container-* 主題變數來自訂專案中的 fixed-width column 通用類別：
@theme { --container-4xs: 14rem; }現在可以在標記中使用 columns-4xs 通用類別：
<div class="columns-4xs"> <!-- ... --></div>在主題文件中了解更多關於自訂主題的資訊。