Grid三列等高靠默认align-items: stretch和同属一行，非align-content；常见问题包括align-self覆盖、高度限制或容器塌缩，修复需重置stretch、设min-height:0或确保高度上下文。
Grid 布局实现三列等高，核心不是靠 align-content，而是靠 Grid 容器的**默认行为**——同一行内的所有网格项（grid items）在默认情况下就自动等高。只要三列属于同一行（即没有显式换行），它们的高度会由该行中内容最高的那一列决定，其余列自动拉伸填满。
✅ 三列等高的基础写法（最简可靠）
不需要额外设置 align-content，也不需要手动设高度：
- 给容器设
display: grid和grid-template-columns: 1fr 1fr 1fr（或repeat(3, 1fr)） - 子元素直接作为网格项放入，不设
grid-row或grid-column（即默认按源顺序流式排列） - Grid 默认使用
align-items: stretch，让每项在交叉轴（这里是垂直方向）自动拉伸填满行高
⚠️ align-content 不是用来控制单行内等高的
align-content 只在**网格容器有多行（即存在多条轨道）且总高度大于内容所需高度时**才起作用，它控制的是“行与行之间”的对齐和分布方式（比如居中、两端对齐、均匀分布）。如果只有 1 行，align-content 完全无效。
想让三列等高，真正起作用的是：align-items: stretch（默认值，无需写）+ 网格项在同一行 + 容器有明确的块级上下文（如父容器有高度，或自身不塌缩）。
? 遇到“不等高”？常见原因和修复
-
子元素设置了
align-self: start / end / center—— 覆盖了默认的stretch，删掉或重置为stretch -
某列用了
height或min-height限制，但其他列没设 —— 统一用min-height: 0防止 flex/grid 内部最小高度干扰（尤其嵌套时） -
容器本身高度塌缩（比如父容器没高度、没触发 BFC） —— 给容器加
min-height: 0或确保其有高度上下文（如display: block+ 正常流） -
用了
grid-auto-flow: column—— 这会让元素按列填充，破坏行内等高逻辑；保持默认row
? 进阶：需要多行也等高（如响应式换行后仍保持每行三列等高）
此时可结合 grid-auto-rows: 1fr + align-items: stretch：
-
grid-template-columns: repeat(3, 1fr)固定三列 -
grid-auto-rows: 1fr让每一行都等分剩余空间（需容器有明确高度，如height: 400px） - 仍依赖
align-items: stretch拉伸本行内各项
注意：这种“多行等高”本质是每行内部等高，不同行之间高度可能不同（除非所有行内容高度一致）。
基本上就这些。Grid 的等高是天然能力，关键在别误关它（比如改了 align-self），也别指望错的属性（比如 align-content）来解决。
