網格軌道
用一個 class 設定等分的網格軌道或跨軌道配置。
本頁目錄
類別
| 類別 | 宣告 |
|---|---|
grid-cols(<integer>) | display: grid;grid-template-columns: repeat(<integer>, minmax(0, 1fr)); |
grid-rows(<integer>) | display: grid;grid-auto-flow: column;grid-template-rows: repeat(<integer>, minmax(0, 1fr)); |
grid-col-span(<integer>) | grid-column: span <integer>/span <integer>; |
grid-row-span(<integer>) | grid-row: span <integer>/span <integer>; |
grid-cols() 與 grid-rows() 會建立 Grid；span 函式則將項目放進既有的 Grid。
軌道數量與項目配置由不同元素負責
grid-cols(3) 設定 display: grid 與三個 minmax(0, 1fr) 欄。grid-rows(3) 設定三個同樣規格的列，並設定 grid-auto-flow: column。其餘配置都採用預設值時，相同的六個子元素在第一種情況會橫向填入，在第二種情況則會向下填入。
欄與列組合樣式以不同方向填入相同子元素
兩個 Grid 使用相同的六個子元素與間隙。grid-rows(3) 還會設定 grid-auto-flow: column，grid-cols(3) 則保留預設的列向流動。方塊高度依內容決定。
文字說明
- 第一個 Grid 有三個明確的 minmax(0, 1fr) 欄。預設列向流動將項目 1、2、3 放在第一列，接著放入 4、5、6。
- 第二個 Grid 有三個明確的 minmax(0, 1fr) 列，並沿欄自動配置。項目 1、2、3 填滿第一欄，4、5、6 填入第二欄。
- 兩個場景都使用真正的預設 CSS、六個相同且由內容決定尺寸的方塊，以及 12px 間隙。外部寬度讓方塊寬度便於比較；這兩個組合樣式本身都不提供該間隙或寬度。
- 圖中使用預設的項目配置。明確指定位置或跨越數可能改變結果；grid-cols 不會重設其他地方建立的欄向流動。
軌道數量與跨越數都必須使用正整數。軌道函式不會加入間隙。等分比例會分配扣除間隙後的可用空間；零最小值允許軌道縮小，但本身不會讓內容換行或裁切內容。
grid-col-span(2) 與 grid-row-span(2) 設定項目的配置，不會設定父元素的 display。跨越數超過明確建立的 Grid 時，可能產生隱含軌道。跨斷點協調軌道數量與跨越數的做法，請見版面配置指南。
grid-cols() 不會重設 grid-rows() 建立的欄向流動。如果兩者都生效，兩組軌道定義都會保留，自動配置仍會沿著欄向下進行。明確需要列向流動時，請加入 (grid-auto-flow:row)。
列的等分比例需要受限的可用高度，才能分配固定的垂直空間。在高度為 auto 的 Grid 中，內容會參與列尺寸計算；grid-rows(3) 並不是高度限制。
另見 版面配置與原生 Grid 配置.
用法
配置三個等寬欄，讓主要區塊跨兩欄與兩列。
<div class="… grid-cols(3) gap-xs"> <div class="… grid-col-span(2) grid-row-span(2)">Feature</div> <div>Notes</div> <div>Drafts</div> <div>Archive</div> <div>Shared</div> <div>Trash</div></div>產生的 CSS
@layer theme { :root, :host { --spacing-xs: .5rem }}@layer utilities { .grid-cols\(3\) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) } .gap-xs { gap: var(--spacing-xs) } .grid-col-span\(2\) { grid-column: span 2/span 2 } .grid-row-span\(2\) { grid-row: span 2/span 2 }}自訂
預設集使用 @utility 定義這些類別。在你的樣式表中定義相同名稱，即可取代原本的定義。
@utility grid-cols(--n <integer>) { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));}@utility grid-rows(--n <integer>) { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--n), minmax(0, 1fr));}@utility grid-col-span(--n <integer>) { grid-column: span var(--n)/span var(--n);}@utility grid-row-span(--n <integer>) { grid-row: span var(--n)/span var(--n);}另見 utility 定義與版面配置.