使用CSS Grid的repeat(auto-fill, minmax())模式可实现多行等宽卡片布局。通过设置display: grid、grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))和gap间距，结合自动行高与响应式断点优化，能创建内容自适应、视觉整齐且支持多设备的卡片网格，核心在于合理利用fr单位与minmax函数实现弹性布局。
要在CSS中实现多行等宽卡片布局，使用CSS Grid是最简洁高效的方式。通过定义固定列宽和让行高自动适应内容，可以轻松创建响应式且视觉整齐的卡片网格。
定义Grid容器并设置固定列宽
将父容器设为display: grid，使用grid-template-columns定义等宽列。配合repeat()和fr单位，可以让每列均分可用空间。
例如，创建每列最小宽度为250px、自动填充多列的布局：
.grid-container {display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
padding: 16px;
}
minmax(250px, 1fr) 表示每列最小250px，最大占据等分空间；auto-fill 自动填充尽可能多的列，不足时自动换行。
立即学习“前端免费学习笔记（深入）”；
让卡片高度随内容自动伸缩
Grid默认行高由内容决定。只要不显式设置grid-auto-rows或height，行高会自动撑开以容纳最长内容。
确保卡片内部元素不强制固定高度：
- 避免给卡片设置
height - 使用
align-items: start防止内容垂直拉伸 - 允许文本自然换行，不设置
white-space: nowrap
background: #f5f5f5;
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
适配不同屏幕的响应式优化
上述minmax()结合auto-fill已具备基础响应能力。如需更精细控制，可添加断点调整最小宽度：
.grid-container {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
在小屏幕上减小最小列宽，提升空间利用率。
基本上就这些。用Grid实现多行等宽卡片，核心是repeat(auto-fill, minmax())模式，再配合自动行高和合理间距，就能得到整齐美观的布局。不复杂但容易忽略细节。
