CSS布局如何实现网格卡片等高排列_Grid auto-rows与gap组合

使用grid-auto-rows: 1fr实现等高行，配合gap控制间距，可轻松创建结构规整的网格卡片布局，结合flex布局优化内容对齐，提升视觉一致性。

在实现网格卡片布局时，等高排列是一个常见需求。使用CSS Grid配合grid-auto-rows与gap，可以轻松实现结构规整、高度一致的卡片效果。

基本Grid容器设置

将父容器设为display: grid，通过grid-template-columns定义列数，比如三列等宽布局：

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

此时每行的高度由内容决定，可能出现高低不一的问题。

使用 grid-auto-rows 实现等高行

添加grid-auto-rows: 1fr，让每一行自动均分可用空间，从而实现等高效果：

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr; /* 所有行高度相等 */
}

这样即使某个卡片内容较少，也会撑满整行高度，达到视觉上的对齐。

利用 gap 控制间距

使用gap属性统一设置行列间距，避免传统margin带来的复杂计算：

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px; /* 行列间距均为16px */
}

也可以分别设置row-gap和column-gap进行更精细控制。

卡片内部布局建议

为了让内容在等高卡片中表现更好，推荐：

• 设置height: 100%使卡片占满网格单元
• 使用Flex布局垂直对齐内容：
  display: flex; flex-direction: column; justify-content: space-between;
• 标题或正文可设flex: 1实现自适应填充

基本上就这些。用grid-auto-rows: 1fr配合gap，既能保证等高排列，又能保持间距整洁，是现代布局中非常实用的组合。不复杂但容易忽略。