Flexbox 和 Grid
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-(<custom-property>) | grid-auto-columns: var(<custom-property>); |
auto-cols-[<value>] | grid-auto-columns: <value>; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用像 auto-cols-min 和 auto-cols-max 这样的工具来控制隐式创建的网格列的大小：
¥Use utilities like auto-cols-min and auto-cols-max to control the size of implicitly-created grid columns:
<div class="grid auto-cols-max grid-flow-col"> <div>01</div> <div>02</div> <div>03</div></div>使用自定义值(Using a custom value)
¥Using a custom value
使用 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() 函数。
响应式设计(Responsive design)
¥Responsive design
在 grid-auto-columns 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="grid grid-flow-col auto-cols-max md:auto-cols-min ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。