grid-auto-columns

用於控制隱式建立的網格欄大小的實用程式。

類別樣式

類別	樣式
`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-(<自訂屬性>)`	`grid-auto-columns: var(<自訂屬性>);`
`auto-cols-[<值>]`	`grid-auto-columns: <值>;`

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-(<自訂屬性>)

grid-auto-columns: var(<自訂屬性>);

auto-cols-[<值>]

grid-auto-columns: <值>;

範例

使用 auto-cols-min 和 auto-cols-max 等實用程式來控制隱式建立的網格欄的大小

<div class="grid auto-cols-max grid-flow-col">  <div>01</div>  <div>02</div>  <div>03</div></div>

使用 auto-cols-[<值>] 語法來設定隱式建立的網格欄的大小基於完全自訂的值

<div class="auto-cols-[minmax(0,2fr)] ...">  <!-- ... --></div>

對於 CSS 變數，您也可以使用 auto-cols-(<自訂屬性>) 語法

<div class="auto-cols-(--my-auto-cols) ...">  <!-- ... --></div>

這只是 auto-cols-[var(<自訂屬性>)] 的簡寫，它會自動為您加入 var() 函式。

前綴將 grid-auto-columns 實用程式加上一個像 md: 這樣的斷點變體，以便僅在中型螢幕尺寸及以上套用該實用程式

<div class="grid grid-flow-col auto-cols-max md:auto-cols-min ...">  <!-- ... --></div>

在變體文件中了解更多關於使用變體的資訊。