Flexbox & Grid
用於控制隱式建立的 grid 欄大小的通用類別。
| Class | Styles |
|---|---|
auto-cols-auto | grid-auto-columns: auto; |
auto-cols-min | grid-auto-columns: min-content; |
auto-cols-max | grid-auto-columns: max-content; |
auto-cols-fr | grid-auto-columns: minmax(0, 1fr); |
auto-cols-(<custom-property>) | grid-auto-columns: var(<custom-property>); |
auto-cols-[<value>] | grid-auto-columns: <value>; |
使用 auto-cols-min 和 auto-cols-max 等通用類別來控制隱式建立的 grid 欄大小：
<div class="grid auto-cols-max grid-flow-col"> <div>01</div> <div>02</div> <div>03</div></div>使用 auto-cols-[<value>] 語法，根據完全自訂的值來設定 size of implicitly-created grid columns：
<div class="auto-cols-[minmax(0,2fr)] ..."> <!-- ... --></div>對於 CSS 變數，你也可以使用 auto-cols-(<custom-property>) 語法：
<div class="auto-cols-(--my-auto-cols) ..."> <!-- ... --></div>這只是 auto-cols-[var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。
在 grid-auto-columns 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<div class="grid grid-flow-col auto-cols-max md:auto-cols-min ..."> <!-- ... --></div>在變體文件中了解更多關於使用變體的資訊。