使用fr单位、minmax()函数和auto-fit或auto-fill可实现CSS Grid列宽自动扩缩；1. minmax(200px, 1fr)设定列宽范围，确保最小宽度并均分剩余空间；2. auto-fit使列拉伸填满容器，auto-fill保留空列位置；3. 实际应用中.container设置repeat(auto-fit, minmax(250px, 1fr))实现响应式卡片布局；4. 可结合min()等函数防止小屏幕溢出。
在CSS Grid布局中，想要实现列宽自动扩缩，灵活适应内容和容器空间，fr单位、minmax() 函数和 auto-fit 或 auto-fill 的结合使用是关键。这种组合能让网格列在最小宽度基础上自由伸展，充分利用可用空间。
1. 使用 minmax() 定义弹性列宽
minmax(min, max) 允许你为网格轨道（列或行）设定一个尺寸范围。当容器空间充足时，列可以扩展；空间不足时，则收缩到最小值。
例如，设置每列最小 200px，最大可扩展至 1fr（即均分剩余空间）：
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));这意味着：有多少列能放下，就放多少列，每列至少 200px 宽，多余空间平均分配。
立即学习“前端免费学习笔记（深入）”；
2. auto-fit 与 auto-fill 的区别
两者都用于配合 repeat() 创建响应式列数，但行为略有不同：
- auto-fit：将所有“空”列折叠，让已有列拉伸填满容器。
- auto-fill：保留可能为空的列位置，不拉伸已有列。
通常在卡片布局中更推荐使用 auto-fit，视觉更紧凑。
3. 实际应用示例
假设你要做一个响应式图片或卡片网格：
.container {display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
效果如下：
- 屏幕足够宽时，尽可能多显示列，每列大于 250px 并均分空间。
- 屏幕变窄时，列数自动减少，每列仍保持最小 250px。
- 只有一列时，该列占满整个容器宽度。
4. 配合其他单位增强灵活性
你可以混合使用 %、max-content 等：
grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));这样可以防止在小屏幕上列宽超出容器。
基本上就这些。用好 minmax() 和 auto-fit，再搭配 fr 单位，就能实现非常自然的自适应网格列宽控制。不复杂但容易忽略细节。
