CSSGrid子元素高度控制技巧

CSS Grid 中子元素默认不会继承父容器高度，这并非缺陷而是其基于行轨道（grid-row）的布局本质所决定——真正控制子项高度的关键在于通过 `grid-template-rows`（如 `1fr`）为行轨道明确分配可用空间，而非依赖 `align-self: stretch`；后者仅在子项无显式高度且所在轨道尺寸确定时才生效，本质上是对齐手段而非高度继承机制。理解这一“轨道驱动”逻辑，才能避开常见失效陷阱，精准实现子项填满高度的预期效果。

Grid 子元素默认不继承父容器高度，这是设计使然，不是 bug。它和 Flex 不同：Grid 容器的 height 只定义容器自身尺寸，子项（grid item）默认按内容撑开，不会自动填满行轨道（track），除非你显式干预。

align-self 控制的是单个子项在单元格内的对齐，不是“继承高度”

很多人误以为设 align-self: stretch 就能让子项“撑满高度”，其实它只在子项**没有显式设置高度**且所在行轨道有确定尺寸时才生效。如果父容器 height 是 auto 或子项自己写了 height: 100px，align-self 就基本没机会起作用。

• align-self: stretch 生效前提：子项未设置 height/min-height，且其所在行轨道（grid-row 对应的 grid-template-rows 值）是固定值（如 100px）或 1fr
• 如果父容器 height: auto，整行轨道高度由内容决定，stretch 就无“可伸空间”
• align-self: start / center / end 只改变子项在单元格内的垂直位置，不改变其自身高度

真正让子项“填满高度”的关键在 grid-template-rows

子项能否撑高，取决于它所在的行轨道是否具备明确高度。靠 align-self 单打独斗不行，得配合容器层定义。

• 用 grid-template-rows: 1fr 替代 auto 或留空：强制该行占据剩余可用空间
• 避免写 grid-template-rows: max-content —— 它会让轨道高度完全由内容决定，子项再怎么 stretch 也撑不满
• 若需多行均等分高，用 1fr 1fr；若首行固定、余下自适应，写 200px 1fr
• 注意：父容器本身必须有可计算的高度来源（比如设置了 height: 400px，或被 flex/grid 父级约束）

常见失效场景和绕过方式

遇到 align-self: stretch 不生效，先检查这些硬性条件是否满足：

• 父容器没设 display: grid？—— 必须有，且不能被 float 或 position: absolute 干扰布局上下文
• 子项写了 height、min-height 或 max-height？—— 这些会直接压制 stretch 行为
• 用了 grid-auto-rows 而非 grid-template-rows？—— grid-auto-rows 只影响隐式网格行，对显式定义的子项无效
• 子项跨行（grid-row: 1 / 3）但目标行轨道高度为 auto？—— 跨行不解决高度来源问题，仍需轨道本身有尺寸

最常被忽略的一点：Grid 的“高度继承”本质是轨道驱动，不是样式继承。别指望子项自动读取父容器 height，得靠 grid-template-rows 把高度“分配”下去，align-self 只是最后一步微调对齐方式。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~