使用 repeat(auto-fit, minmax(200px, 1fr)) 可实现等宽列自动布局，浏览器会根据容器宽度自动调整列数；minmax 确保每列最小宽度为 200px，空间充足时均分剩余宽度；auto-fit 在屏幕变窄时减少列数并拉伸现有列，保持紧凑排列；相比 auto-fill，auto-fit 更适合响应式卡片布局，无需媒体查询即可适配多端屏幕。
在CSS Grid中实现等宽列布局，并让列数根据容器宽度自动调整，最有效的方式是结合 repeat、auto-fit 和 minmax。这种方式能让每一列保持最小宽度，同时在空间充足时自动扩展或增加新列，达到高度自适应的响应式效果。
使用 auto-fit 自动填充列
auto-fit 会自动将网格轨道（列）填满容器，只要剩余空间足够容纳一个 minmax 定义的最小宽度，就会生成新的一列。
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
这段代码的含义是：
- 创建尽可能多的列，只要每列至少能放下 200px
- 当容器变宽，列会在 200px 基础上均分剩余空间（因为最大值是 1fr）
- 屏幕变窄时，列会自动换行减少数量，始终保持最小宽度
minmax 设置弹性尺寸范围
minmax(最小值, 最大值) 是关键，它定义了每列的尺寸区间。
立即学习“前端免费学习笔记（深入）”；
-
minmax(150px, 1fr)：列最小 150px，最大可伸展占满可用空间 -
minmax(max-content, 1fr)：最小为内容所需宽度，最大仍为 1fr -
minmax(0, 1fr)：允许列压缩到 0（适合内容不固定的场景）
与 auto-fit 搭配时，浏览器会不断尝试放入更多满足 minmax 条件的列。
auto-fit 与 auto-fill 的区别
两者都用于自动创建列，但行为略有不同：
- auto-fit：把空的重复列折叠掉，让现有列拉伸填满空间
- auto-fill：保留所有可能的列轨道，即使没有内容也会占位
多数情况下推荐使用 auto-fit，视觉更紧凑，更适合卡片、图库等布局。
基本上就这些。掌握 repeat(auto-fit, minmax()) 这个组合，就能轻松实现现代响应式等宽列布局，无需媒体查询也能适配各种屏幕。
