使用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 自动填充尽可能多的列，不足时自动换行。

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

让卡片高度随内容自动伸缩

Grid默认行高由内容决定。只要不显式设置grid-auto-rows或height，行高会自动撑开以容纳最长内容。

确保卡片内部元素不强制固定高度：

• 避免给卡片设置height
• 使用align-items: start防止内容垂直拉伸
• 允许文本自然换行，不设置white-space: nowrap

.card {
  background: #f5f5f5;
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

适配不同屏幕的响应式优化

上述minmax()结合auto-fill已具备基础响应能力。如需更精细控制，可添加断点调整最小宽度：

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

在小屏幕上减小最小列宽，提升空间利用率。

基本上就这些。用Grid实现多行等宽卡片，核心是repeat(auto-fill, minmax())模式，再配合自动行高和合理间距，就能得到整齐美观的布局。不复杂但容易忽略细节。