Flexbox & Grid
grid-template-columns
用於指定網格佈局中欄的實用程式。
| 類別 | 樣式 |
|---|---|
grid-cols-<number> | grid-template-columns: repeat(<number>, minmax(0, 1fr)); |
grid-cols-none | grid-template-columns: none; |
grid-cols-subgrid | grid-template-columns: subgrid; |
grid-cols-[<value>] | grid-template-columns: <value>; |
grid-cols-(<custom-property>) | grid-template-columns: var(<custom-property>); |
範例
指定網格欄
使用 grid-cols-<number> 實用程式（例如 grid-cols-2 和 grid-cols-4）來建立具有 n 個大小相等的欄的網格
01
02
03
04
05
06
07
08
09
<div class="grid grid-cols-4 gap-4"> <div>01</div> <!-- ... --> <div>09</div></div>實作子網格
使用 grid-cols-subgrid 實用程式來採用項目父元素定義的欄軌
01
02
03
04
05
06
<div class="grid grid-cols-4 gap-4"> <div>01</div> <!-- ... --> <div>05</div> <div class="col-span-3 grid grid-cols-subgrid gap-4"> <div class="col-start-2">06</div> </div></div>使用自訂值
使用 grid-cols-[<value>] 語法 來設定columns基於完全自訂的值
<div class="grid-cols-[200px_minmax(900px,_1fr)_100px] ..."> <!-- ... --></div>對於 CSS 變數，您也可以使用 grid-cols-(<custom-property>) 語法
<div class="grid-cols-(--my-grid-cols) ..."> <!-- ... --></div>這只是 grid-cols-[var(<custom-property>)] 的簡寫，會自動為您新增 var() 函數。
響應式設計
前綴使用 grid-template-columns 實用程式 搭配斷點變體（例如 md:）來僅在中型中型 螢幕尺寸及以上套用實用程式
<div class="grid grid-cols-1 md:grid-cols-6 ..."> <!-- ... --></div>在變體文件中瞭解更多關於使用變體的資訊。
