align-items: stretch 默认生效但需容器有明确高度约束，否则因无参照高度而失效；子项设height/max-height等会优先于stretch，且absolute定位项不参与拉伸。
align-items: stretch 是默认值，但经常不生效？
因为 stretch 只在**容器有明确高度约束**时才起作用。如果 Grid 容器本身高度由内容撑开（比如没设 height 或 min-height），子项就无法“拉伸”到一个可参照的高度——它连“拉到哪”都不知道。
常见错误现象：align-items: stretch 写了，但所有网格项还是按内容高度堆叠，垂直方向毫无变化。
- 确保父容器有明确高度：比如
height: 100vh、min-height: 400px，或被 flex/grid 父级约束住 - 检查子项是否设置了
align-self—— 它会覆盖align-items，单个项写align-self: auto或删掉就能恢复继承 - 注意
overflow：子项内容超长时，stretch仍生效，但可能触发滚动或裁剪，不是失效
Grid 中哪些情况 stretch 会被忽略？
stretch 对某些尺寸声明“让步”，不是无条件拉满。
使用场景：你希望某列里的所有 div 高度一致，但其中一项写了 height: 200px，另一项写了 max-height: 150px。
立即学习“前端免费学习笔记（深入）”；
- 子项设置了
height、min-height或max-height：以这些值为优先，stretch只在无冲突时补足剩余空间 - 子项内部是 flex 容器且设了
align-items: flex-start：不影响 grid 层的拉伸，但可能让内容看起来没居中 - 子项含
position: absolute：脱离文档流，不参与stretch计算
和 flex 的 align-items 有什么关键区别？
CSS Grid 的 align-items 作用于**每个网格区域（grid area）内的块级盒子**，而 Flex 的作用于**直接子元素**。这点容易混淆，尤其当 Grid 子项本身是 flex 容器时。
参数差异：
- Grid 支持
self-start/self-end，对应子项自己的align-self起始/结束边，Flex 没这俩值 - Grid 的
stretch在多行轨道（grid-template-rows: repeat(3, 1fr)）中，是对**每一行内所有项分别拉伸**；Flex 的stretch是对整行所有子项统一拉伸到容器高度 - 兼容性上，
align-items: stretch在 Grid 和 Flex 中都支持 IE10+，但self-start等新值需 Chrome 64+/Firefox 61+
实际调试时怎么快速验证是否拉伸成功？
别只看视觉，用 DevTools 直接查计算后的 height 值最可靠。
性能影响很小，但容易被忽略的一点是：拉伸行为发生在 layout 阶段，如果子项里有大量重排敏感操作（比如频繁读取 offsetHeight），可能放大 layout thrashing。
- 在 Chrome DevTools 的 Elements 面板中选中子项，看 Styles 里
Computed标签页下的height是否等于容器可用高度减去 gap - 临时加
outline: 1px solid red到子项，能立刻暴露是否真正撑满（比 background 更准，不受背景裁剪干扰） - 如果用 JS 动态改了
grid-template-rows，记得触发一次 relayout（比如读取offsetHeight），否则stretch可能延迟应用
stretch 就彻底静音。 
