使用 grid-auto-rows: minmax(100px, auto) 可使每行卡片最小高度为 100px 并随内容自动扩展，结合 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 实现列数自适应，gap 控制间距，容器内卡片等宽分布且响应式调整；在移动端可将 minmax 最小值改为 180px、减小 gap 和调整字体以优化显示效果，整体布局简洁灵活，真正实现内容驱动的响应式卡片墙。
要制作响应式卡片墙，关键在于利用 CSS Grid 的 grid-auto-rows 和 minmax() 函数配合使用，让每行卡片高度自动适应内容，同时保持最小和最大高度的控制。这种方法灵活、简洁，适合不同屏幕尺寸下的布局。
使用 grid-auto-rows 与 minmax() 创建自适应行高
通过设置 grid-auto-rows: minmax(100px, auto)，可以让每一行的卡片至少有 100px 高，但又能根据内容自动撑高。这样在内容长短不一的情况下，也能保持良好的视觉效果。
- grid-auto-rows 控制隐式生成的行的高度
- minmax(最小值, 最大值) 定义尺寸范围，auto 表示内容决定高度
- 结合 grid-template-columns 实现列的响应式分布
实现响应式列数：使用 fr 单位与媒体查询
为了让卡片在不同设备上自动调整列数，可以使用 repeat(auto-fit, minmax(250px, 1fr))。这表示容器会尽可能放入宽度不少于 250px 的列，并且每列等宽伸展。
- auto-fit 自动填充可用空间
- minmax(250px, 1fr) 确保每列最小 250px，最大占 1 份剩余空间
- 无需写多个媒体查询即可实现基本响应式
完整示例代码
以下是一个完整的响应式卡片墙实现：
立即学习“前端免费学习笔记（深入）”；
<font face="monospace">
.container {
display: grid;
grid-auto-rows: minmax(100px, auto);
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
padding: 16px;
}
.card {
background: #f4f4f4;
border-radius: 8px;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
}
</font>
HTML 结构只需一个容器包裹多个 .card 元素即可。
适配移动端的小技巧
在小屏幕上，可以微调 min-width 值来确保卡片不会太窄。比如将 minmax 中的最小值设为 200px 或使用媒体查询进一步优化间距。
- 在手机端可改为 minmax(180px, 1fr) 提高适应性
- 减少 gap 间距（如从 16px 改为 8px）节省空间
- 字体大小也可随视口调整，提升可读性
基本上就这些。grid-auto-rows 搭配 minmax 不仅简化了布局逻辑，还让卡片墙真正实现“内容驱动”的响应式设计。不复杂但容易忽略细节，比如 auto 和 min-content 的区别，用对了才能避免高度塌陷。
