先记住这个答案
三列文章卡片中某张摘要加长，同一行的轨道高度通常要容纳这张卡片，于是同行其他卡片所在的格子也变高；下一行可由自己的内容决定高度。容器没有明确块轴高度时，行高增长通常连带容器变高。align-content: space-between 需要可分配的额外空间，不能凭空把几行拉满整个视口。
- 无明确高度时容器随行增长
- 同一行由项目贡献共同定高
- 不同行可以高度不同
- 行间对齐需要额外块轴空间
三列文章卡片的行高
文章卡片列表用 Grid 排三列，每张卡片的摘要长短不同。同一行的行轨道要容纳这一行里最高的卡片，下一行再根据自己的项目确定高度。整个网格没有固定高度，就随着这些行的高度和 row-gap 累加。若你要让页面某块区域填满视口，应先给外层提供最小高度，再决定行轨道如何分配额外空间。
.articles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-rows: auto; /* 新行由内容贡献确定高度 */
gap: 16px;
/* 不指定 height，容器随行轨道增长 */
}新增文章使网格生成新行，新行高度由其项目内容决定。
自动行随内容贡献增长
Grid 的轨道尺寸算法会收集项目的最小与最大内容贡献、跨行项目以及显式的最小最大限制。自动行在普通内容场景下至少要容纳对应项目；内容较多的卡片会抬高该行高度。若项目跨多行，贡献还会在相关轨道间分配，不能简单说每行等于其中一个项目的高度。align-content 只在容器块轴有额外空间时负责对齐和分配，不能无中生有地创造高度。
卡片“等高”也容易被误读。Grid 默认让同一行的项目在各自网格区域内拉伸，看起来每张卡片都一样高；这不表示每张卡片的内容高度相同，也不表示所有行共用一个行高。若给卡片加 align-self: start，你会看到卡片盒子不再铺满行轨道，但该行轨道仍由最高内容及尺寸约束决定。若业务要求所有行都等高，应明确轨道策略，而不是指望一张高卡片自动同步影响其他行。
检查容器高度时，还要区分 height: auto 与明确的 height: 600px。前者随内容增长；后者给行轨道一个可分配的固定空间，align-content 才可能把多余空间放到行间。固定高度容器里内容太多时也可能溢出，不能期待 align-content 把内容压小。
容易答错的地方
- 说所有 Grid 行默认等高
- 同一行共享一个轨道高度，不同行可因内容不同而高度不同。
- 把
height: 100%当成自适应修复 - 百分比高度需要可确定的包含块；无高度约束的内容网格通常自然增长即可。
面试官还会怎么问？
同一行的短卡片为什么看起来也很高？
行轨道由该行最高的内容贡献决定，默认拉伸对齐还会让短卡片的盒子填满行高。
align-content: space-between 何时可见？
容器有比行轨道总高度更多的确定块轴空间时，才有余量可在行间分配。
跨两行的项目会怎样影响行高？
它的尺寸贡献会参与所跨轨道的尺寸计算，不一定只加到第一行。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。