版面
以限寬包覆層、間距 token、欄格線與明確軌道組合頁面。
本頁目錄
#概覽
組合頁面時先決定三件事：限制寬度的包覆層、控制欄間距與外距的間距 token，以及區域使用的欄格線。原生 Grid 與 Flexbox 負責版面配置；Master CSS 為這些值命名。
使用滑桿或方向鍵調整檢視區，觀察版面從緊湊堆疊轉為八欄配置。
工作區版面
<main class="w-full max-w-3xl mx-auto p-md"> <section class="grid-cols(4) gap-sm grid-cols(8)@2xs gap-md@2xs"> <header class="grid-col-span(4) grid-col-span(8)@2xs"><h1>Project overview</h1></header> <article class="grid-col-span(4)"><h2>Revenue</h2><p>$128.4k</p></article> <article class="grid-col-span(4)"><h2>Activation</h2><p>64.2%</p></article> <article class="grid-col-span(4) grid-col-span(5)@2xs"><h2>Weekly demand</h2></article> <aside class="grid-col-span(4) grid-col-span(3)@2xs"><h2>Launch tasks</h2></aside> </section></main>產生的 CSS
@layer theme { :root, :host { --spacing-md: 1rem; --container-3xl: 48rem }}@layer utilities { .grid-cols\(4\) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) } .max-w-3xl { max-width: var(--container-3xl) } .p-md { padding: var(--spacing-md) } @media (width >= 37.5rem) { .grid-cols\(8\)\@2xs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)) } } @media (width >= 37.5rem) { .gap-md\@2xs { gap: var(--spacing-md) } } @media (width >= 37.5rem) { .grid-col-span\(5\)\@2xs { grid-column: span 5/span 5 } }}跨欄數與格線同步調整
寬版面使用八條等寬軌道。每列都完整分配這些軌道：8、4 + 4，再來是 5 + 3。欄間距位於軌道之間。
文字說明
- 同一套格線. 寬版配置使用 grid-cols(8)，每對軌道之間都有相同間距。
- 整列與共用列. 頁首跨八條軌道，每個指標跨四條；需求與任務區分別跨五條與三條。
- 同步調整. 斷點改變格線欄數時，在相同斷點更新依賴它的跨欄數。
低於 2xs 時，每個區域都跨滿四欄。達到 2xs 後，頁首跨八欄，兩個指標共用一列，需求與任務區則在下一列以五比三分配。
#選擇間距值
p-、m- 與 gap- 等間距 class 接受三種形式：
| 形式 | Class | 產生結果 |
|---|---|---|
| 間距 token | p-md | padding: var(--spacing-md) |
| 直接值 | p(1) | padding: calc(1 * 1px) |
| 原生長度 | (padding:0.5rem) | padding: 0.5rem |
產生的 CSS
@layer theme { :root, :host { --spacing-md: 1rem }}@layer utilities { .p-md { padding: var(--spacing-md) } .p\(1\) { padding: calc(1 * 1px) } .\(padding\:0\.5rem\) { padding: 0.5rem }}頁面共用的節奏，例如欄間距、內距與區段間距，使用 token。直接值長度以像素表示，所以 p(1) 是一像素內距，不是尺度中的一級；適合用於細線與 m(0) 這類重設。其他單位請寫成原生宣告。完整尺度請見間距，各函式請見直接值。
當某個距離成為反覆使用的設計決策，請依角色命名。--spacing-1 這類數字鍵名會讓人誤讀為直接值 p(1)。
@theme { --spacing-section: 6rem;}<section class="py-section">…</section>px-* 與 py-* 設定邏輯行內與區塊內距。實際方向會跟隨元素的書寫模式：
行內內距依書寫模式調整
兩個正方形內容框尺寸相同。色帶標示實際 16px 的 padding-inline 區域。
文字說明
- px(16) 輸出 padding-inline: calc(16 * 1px)。在 horizontal-tb 中，兩側內距位於左、右。
- 在 vertical-rl 中，行內軸為垂直方向，因此相同 class 將內距放在上、下。
- Master CSS 的 x、y 名稱指行內軸與區塊軸。實體 t、r、b、l 名稱則保留實體方向。
p-* 設定四邊。只有一側內距需要不同時，再加上指定該側的 class：
單邊覆寫只改變該邊
色帶是檢查輔助線，不是生成的背景色彩。兩個範例使用真正的預設集 CSS，內容尺寸也相同。
文字說明
- p(24) 為內容四邊提供 24px 內距。
- 加入 pt(8) 將上方內距改為 8px。相同條件下，其餘三邊維持 24px，不受兩個 HTML class 的順序影響。
#以容器尺寸限制寬度
w-、max-w-、h-、min-w- 與 basis- 讀取 --container-* token，因此 max-w-5xl 對應 max-width: var(--container-5xl)。填滿與內在尺寸則是固定 utility：w-full、w-fit、w-max 與 w-min 一律設定 100%、fit-content、max-content 與 min-content，專案中的 --container-full token 不會改變它們。
產生的 CSS
@layer theme { :root, :host { --container-5xl: 64rem }}@layer utilities { .max-w-5xl { max-width: var(--container-5xl) } .w-full { width: 100% } .w-fit { width: fit-content }}容器 token 只設定長度，不會移動容器查詢的門檻。完整尺度請見容器尺寸。
寬度上限為較小父元素保留彈性
上限是最大值，不是固定寬度。圖中寬度採同一比例；標籤描述限制條件，而非檢視區像素。
文字說明
兩個父元素包含相同的限寬內容框。較小父元素限制內容寬度；較大父元素則在達到最大寬度的內容框周圍留下空間。
#從頁面包覆層開始
讓包覆層填滿父元素，以容器尺寸設定上限、置中，並從間距尺度中選擇兩側留白：
<main class="w-full max-w-7xl mx-auto px-md px-xl@md">…</main>產生的 CSS
@layer theme { :root, :host { --spacing-md: 1rem; --spacing-xl: 2rem; --container-7xl: 80rem }}@layer utilities { .mx-auto { margin-inline: auto } .max-w-7xl { max-width: var(--container-7xl) } .px-md { padding-inline: var(--spacing-md) } .w-full { width: 100% } @media (width >= 64rem) { .px-xl\@md { padding-inline: var(--spacing-xl) } }}包覆層負責頁面對齊，內部格線則負責內容之間的關係。
#建立欄格線
grid-cols(<count>) 建立等寬欄格線，grid-col-span(<count>) 讓項目跨越數欄。斷點改變欄數時，也要在相同斷點調整跨欄數。
格線增加為 12 欄，但文章仍只跨四欄，留下四個空欄。
<section class="grid-cols(4) gap-lg grid-cols(12)@md"> <article class="grid-col-span(4)">…</article> <aside class="grid-col-span(4)">…</aside></section>文章在相同斷點改為跨八欄。
<section class="grid-cols(4) gap-lg grid-cols(12)@md"> <article class="grid-col-span(4) grid-col-span(8)@md">…</article> <aside class="grid-col-span(4)">…</aside></section>產生的 CSS
@layer utilities { .grid-cols\(4\) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) } @media (width >= 64rem) { .grid-cols\(12\)\@md { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)) } } @media (width >= 64rem) { .grid-col-span\(8\)\@md { grid-column: span 8/span 8 } }}跨欄項目包含軌道間的間距
320px 格線使用 grid-cols(3)、gap(16) 與 grid-col-span(2)。尺規呈現實際 CSS 幾何尺寸，不是任意比例。
文字說明
- 可用寬度是 320px。扣除兩個 16px 間距後，288px 平分給三條 96px 軌道。
- 跨兩條軌道的項目涵蓋 96px + 16px + 96px，也就是 208px。它與第三條軌道之間仍保留下一個 16px 間距。
- 改變欄數可能改變軌道寬度；請在相同斷點一併更新相關跨度。
兩個軸向需要不同間距 token 時，使用 col-gap-* 與 row-gap-*。詳見格線軌道。
#指定明確軌道
需要固定或混合軌道時，寫出原生 grid-template-columns 值。使用 | 分隔軌道，產生 CSS 時會轉為空格：
<section class="grid (grid-template-columns:4.5rem|minmax(0,1fr)) gap-md"> <nav>…</nav> <main class="min-w(0)">…</main></section>產生的 CSS
@layer utilities { .min-w\(0\) { min-width: calc(0 * 1px) } .\(grid-template-columns\:4\.5rem\|minmax\(0\,1fr\)\) { grid-template-columns: 4.5rem minmax(0, 1fr) }}min-w(0) 讓主要區域可縮小至內容寬度以下。一般內容維持等寬欄與跨欄設定；應用程式外殼與分割面板再使用明確軌道。
可收縮軌道仍需要文字換行
minmax(0,1fr) 讓軌道可收縮；文字仍需適當的換行策略。高度由內容決定。
文字說明
兩條等寬格線軌道比較短標籤與會換行的長標籤。第二列高度增加，軌道邊界仍保持對齊。
#以較長內容驗證版面
調整尺寸跨越各斷點，同時檢查格線欄數與子項目的跨欄數。使用更長的標題與任務標籤，確認內容能垂直成長。固定尺寸留給需要量測的物件或刻意設定的檢視區；頁面卡片通常只需內距與寬度限制。
使用鍵盤操作預覽中的任務核取方塊，並開啟各區段連結。內容換行時版面仍應可用；為了塞進固定高度卡片而縮小文字，只會掩蓋真正的限制。