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>

了解有关在变体文档中使用变体的更多信息。