使用CSS Grid的auto-fit和minmax可实现自适应多列卡片布局：通过grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))让浏览器自动计算列数，每列最小250px并均分剩余空间，容器不足时自动换行；相比auto-fill，auto-fit会折叠空列使布局更紧凑；配合gap、padding和卡片样式提升视觉效果；需注意老版IE兼容性及设置合理最小宽度。
在响应式网页设计中，多列卡片布局非常常见。使用 CSS Grid 的 auto-fit 配合 minmax() 可以轻松实现列数自动适应容器宽度的效果，无需媒体查询或 JavaScript。
使用 Grid auto-fit 实现自适应列数
核心思路是利用 grid-template-columns 和 repeat() 函数，结合 auto-fit 与 minmax()，让浏览器自动计算可容纳的列数。
示例代码：.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
这段代码的含义如下：
- repeat(auto-fit)：告诉 Grid 自动填充列，尽可能多地放入符合条件的列。
- minmax(250px, 1fr)：每列最小宽度为 250px，最大为 1fr（即均分剩余空间）。
- 当容器宽度不足以放下一个 250px 的新列时，Grid 会自动换行并重新分配剩余列的宽度。
auto-fit 与 auto-fill 的区别
两者都用于自动创建网格轨道，但行为略有不同：
立即学习“前端免费学习笔记（深入）”；
- auto-fit：将空的重复列“折叠”掉，使现有列拉伸填满容器。
- auto-fill：保留所有可能的列位置，即使没有内容填充，可能导致末尾留白。
对于卡片布局，通常选择 auto-fit，以获得更紧凑、美观的视觉效果。
添加响应式间距和卡片样式
为了让布局更精致，可以配合一些额外样式：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
padding: 20px;
}
.card {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
这样无论屏幕大小如何变化，卡片都会整齐排列，且每行尽可能放最多数量的卡片。
注意事项与兼容性
CSS Grid 已被现代浏览器广泛支持，但在老版本 IE 中不可用。如需兼容，可考虑降级方案或使用 Flexbox 模拟。
- 确保父容器有明确宽度，避免网格行为异常。
- minmax 的最小值应根据设计需求设定，避免卡片过窄。
- 可结合 @media 查询微调特定断点下的表现。
基本上就这些。只需几行 CSS，就能实现一个优雅的自适应多列卡片布局。不复杂但容易忽略细节。
