CSS Grid 行高不一致怎么办？使用 grid-auto-rows 与 align-content 统一行高

在 CSS Grid 多行布局中，行高不一致通常表现为：第一行是固定卡片高度，第二行因为某个单元格文本换行被撑高，第三行又回到原样。它的本质不是子项高度写错，而是隐式行的尺寸计算规则与容器剩余空间分配没有配合好。修复之前，需要先区分显式行和隐式行。

一、行高不一致的根源：显式行与隐式行

CSS Grid 中的行轨道有两种来源。grid-template-rows 定义的是显式行，比如只写 grid-template-rows: 120px，那么第一行高度就是 120px。当内容新增到第二行、第三行时，这些行并没有被显式定义，浏览器就会参考 grid-auto-rows 来创建隐式行。grid-auto-rows 的初始值是 auto，它的含义是以该行中最高子项的内容高度作为整行高度。

正因为默认值是 auto，隐式行之间的高度就完全取决于各自内容。例如一个三列网格，第二行的某一项包含两行文字，另一项只有一行文字，那么第二行整体就会按照两行文字的高度撑开；而第三行如果都是一行文字，又会变矮。于是整个网格看起来高低不齐。这种差异不是错误，而是 CSS Grid 对内容自适应的一种默认策略。

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 120px;
  gap: 16px;
  /* 隐式行默认 grid-auto-rows: auto，高度由内容决定 */
}

还有一种容易混淆的情况：给子项设置 height: 100% 并不会自动让行高统一。因为百分比高度需要父级轨道有确定高度，而 auto 轨道在计算时是依赖内容的，子项反而可能失效或出现溢出。因此，统一行高应当从轨道尺寸入手，而不是只调整子项。

二、用 grid-auto-rows 固定或限制隐式行高

最直接的方案是给隐式行一个确定高度。例如将所有隐式行设置为 80px：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 120px;
  grid-auto-rows: 80px;
  gap: 16px;
}

这样第一行保持 120px，其余所有行固定为 80px。对于内容高度基本可控的列表、图标入口等场景，固定值简单有效。但如果某个单元格内容超过 80px，内容就会溢出轨道边界，可能与其他行重叠。这时更好的做法是使用 minmax()，让行高有一个最小值，同时允许被内容撑开：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(80px, auto);
  gap: 16px;
}

minmax(80px, auto) 表示每一行至少 80px，如果内容更高则按内容扩展。这样可以在不溢出的前提下，保证所有行有一个统一的基准高度。视觉上不会再出现一行特别矮、一行特别高的情况，除非某些内容确实需要更多空间。对于需要严格均分容器高度的场景，可以把最大值写成 1fr，但前提是网格容器要有确定的高度。

三、align-content 负责的是轨道组，不是单行高度

关于 align-content，最常见的一个误解是把它当成行高控制器。实际上它操作的是整组行轨道在容器块轴方向上的对齐方式。只有当容器的高度大于所有行轨道总高度时，这个属性才会产生可见效果。

CSS Gridgrid-auto-rowsalign-content修改时间：2026-08-22 16:36:30