使用CSS Grid可高效实现弹性卡片墙布局。1. 设置容器display: grid，配合grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))和gap实现自动换行与间距；2. 卡片内部用flex布局提升内容适配性；3. 可选响应式优化如调整min-width、添加容器padding和max-width；4. 结构简单，缩放时自动重排，代码简洁且效果流畅。
用 CSS Grid 实现弹性卡片墙非常直观且高效。核心是利用 grid 的自动布局能力，让卡片根据容器大小自动换行和调整列数，无需媒体查询也能实现响应式效果。
1. 基础 Grid 网格布局
设置一个容器使用 display: grid，并通过 grid-template-columns 定义列的生成规则。使用 repeat() 配合 auto-fit 或 auto-fill，结合 minmax() 可实现真正的弹性布局。
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
说明：
- auto-fit：自动填充可用空间，将多余空间分配给现有列（更紧凑）
- minmax(250px, 1fr)：每列最小 250px，最大占据等分的剩余空间
- gap：设置卡片之间的间距，比 margin 更干净
2. 卡片样式与内容适配
每个卡片可以统一设置样式，保持视觉一致性。使用 flex 布局内部内容可让结构更灵活。
立即学习“前端免费学习笔记（深入）”；
.card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
padding: 16px;
display: flex;
flex-direction: column;
}
.card img {
border-radius: 4px;
}
.card h3 {
margin: 12px 0 8px;
}
3. 响应式优化（可选增强）
虽然 auto-fit 已具备响应性，但可通过容器限制或断点微调在极小屏幕上的表现。
- 给父容器加 padding 避免贴边
- 在手机端可缩小 min-width，如改为 minmax(180px, 1fr)
- 控制最大宽度避免单行过宽：max-width: 1200px; margin: 0 auto;
4. 完整示例结构
<div class="card-grid"> <div class="card"><img src="..."><h3>标题</h3><p>描述</p></div> <div class="card">...</div> <div class="card">...</div> </div>
配合上面的 CSS，页面加载后会自动排列成多列卡片墙，窗口缩放时平滑调整列数。
基本上就这些。Grid 的强大在于用极少代码实现复杂布局，卡片墙这种场景正是它的优势所在。不复杂但容易忽略。
