grid-auto-columns 与 minmax() 结合可灵活控制隐式列尺寸，适用于动态内容布局；例如 grid-auto-columns: minmax(80px, 1fr) 确保隐式列最小80px、最大等分剩余空间，实现响应式自适应效果。
在 CSS Grid 布局中，grid-auto-columns 用于定义网格容器中隐式创建的列轨道的大小。当网格项被放置在显式网格之外时，浏览器会自动创建新的列，这些列的尺寸由 grid-auto-columns 控制。
将 grid-auto-columns 与 minmax() 函数结合使用，可以更灵活地控制隐式列的最小和最大尺寸，从而实现响应式且自适应的布局。
grid-auto-columns 与 minmax() 的基本语法
minmax() 函数接受两个参数：最小值和最大值。它表示一个尺寸范围，浏览器会在该范围内选择合适的大小。
grid-auto-columns: minmax(最小值, 最大值);例如：
立即学习“前端免费学习笔记（深入）”；
grid-auto-columns: minmax(100px, 1fr);这表示每个隐式创建的列最小为 100px，最大可扩展到占据可用空间的 1 份（即等分剩余空间）。
实际应用场景
这种组合特别适合动态内容或不确定列数的场景，比如仪表盘、卡片列表或数据表格。
- 当内容较少时，列不会小于设定的最小值，避免挤压变形
- 当有足够空间时，列可以按比例伸展，充分利用容器宽度
- 相比固定尺寸，布局更具弹性，适配不同屏幕尺寸
示例代码
以下是一个简单的例子：
.container {display: grid;
grid-template-columns: repeat(2, 100px); /* 显式定义两列 */
grid-auto-columns: minmax(80px, 1fr); /* 隐式列最小80px，最大1fr */
grid-auto-flow: column; /* 启用横向自动排列 */
}
.item {
padding: 10px;
border: 1px solid #ccc;
}
如果 HTML 中有超过两个项目，超出的项目会自动创建新列，并应用 minmax(80px, 1fr) 规则。
常见搭配方式
你可以根据需求调整 minmax 内的值：
- minmax(0, 1fr)：允许列收缩到 0，适合完全弹性布局
- minmax(max-content, 1fr)：最小为内容所需宽度，最大为 1fr
- minmax(200px, 300px)：限制在固定范围内，不随容器拉伸
基本上就这些。合理使用 grid-auto-columns 与 minmax() 能让你的 Grid 布局更智能、更适应内容变化，不复杂但容易忽略细节。
