使用 CSS Grid 的 repeat(auto-fill, minmax(250px, 1fr)) 可实现自适应多列卡片布局，容器根据屏幕宽度自动调整列数，保持响应式且无需媒体查询；auto-fill 保留空轨道，auto-fit 拉伸有内容的列；建议设置父容器宽度和卡片溢出处理，确保视觉一致性。
在实现多列卡片布局时，常常希望容器能根据屏幕宽度自动调整每行显示的卡片数量，同时保持良好的视觉效果。使用 CSS Grid 的 repeat、auto-fill 和 minmax 是目前最简洁高效的解决方案。
使用 Grid 实现自适应多列卡片布局
通过结合 grid-template-columns 与 repeat(auto-fill, minmax(...))，可以让网格容器自动填充可用空间，并确保每个卡片不会小于指定的最小宽度。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
padding: 16px;
}
说明：
-
auto-fill：告诉浏览器尽可能多地创建符合尺寸要求的列，即使某些轨道为空也会保留位置。 -
minmax(250px, 1fr)：表示每一列最小为 250px，最大为 1fr（即均分剩余空间）。 - 当容器宽度不足以容纳一个最小 250px 的卡片时，该列会自动换到下一行（实际是 Grid 自动减少当前行的列数）。
auto-fill 与 auto-fit 的区别
两者都用于自动创建列，但在行为上有细微差别：
立即学习“前端免费学习笔记（深入）”；
- auto-fill：填满所有可能的轨道，即使没有内容也保留空位。
- auto-fit：只生成有内容的轨道，并拉伸这些列以填满容器。
auto-fill；如果希望卡片占满整个宽度，可以用 auto-fit。
响应式无需媒体查询
这种写法天然支持响应式，不需要额外写多个 @media 查询。浏览器会根据容器大小动态计算可容纳的列数。
例如在一个窄屏设备上，Grid 可能只显示一列；在桌面端则显示三到四列，完全由 minmax 控制。
注意事项
- 确保父容器有明确的宽度或占据可用空间（如设置
width: 100%）。 - 卡片内部建议使用弹性布局或设置
overflow: hidden防止内容溢出。 - 若需固定列数响应式切换，仍可配合媒体查询微调
minmax值。
基本上就这些。利用 Grid 的自动填充和 minmax 函数，可以轻松实现美观、灵活、真正自适应的多列卡片布局。不复杂但容易忽略的是 minmax 的合理取值和 auto-fill 的正确使用场景。
