本文讲解如何通过 CSS align-self: end 控制网格子项的对齐方式，使孙元素（grandchild）能正确撑满其所在网格行的高度，从而实现点击按钮隐藏/显示时布局稳定、无空白塌陷。
本文讲解如何通过 css `align-self: end` 控制网格子项的对齐方式，使孙元素（grandchild）能正确撑满其所在网格行的高度，从而实现点击按钮隐藏/显示时布局稳定、无空白塌陷。
在 CSS Grid 布局中，当某个网格项（如 .child2）仅占据单行（例如第四行），而其内部包含一个需“填满该行可用高度”的孙元素（如 #grandchild2）时，常见误区是直接给孙元素设置 height: 100%——但这往往无效，因为其父元素（.child2）默认采用 align-self: stretch，理论上应撑满整行；然而一旦 .child2 内部内容（如按钮 + div）高度不足，或存在 position: relative 等影响盒模型的行为，实际渲染中它可能无法自动扩展高度，导致 100% 高度计算失败。
关键解决方案：显式设置 align-self: end（或 start/center）于网格子项本身。
虽然 stretch 是默认值，但在某些组合下（尤其是配合 position: relative 和绝对定位子元素时），浏览器对“可用空间”的计算可能产生偏差。将 .child2 的 align-self 显式设为 end，可强制其沿行内块方向（block axis）对齐到底部，并触发其自身高度收缩至内容所需最小值，进而让其子元素（孙元素）的百分比高度（如 height: 90%）拥有明确的参考基准。
以下是优化后的核心 CSS 片段：
.parent {
display: grid;
grid-template-rows: repeat(4, minmax(0, 1fr));
min-height: 200px; /* 替代固定 height，增强响应性 */
width: 100%;
background: red;
}
.child1 {
grid-row: span 3;
background: blue;
width: fit-content;
position: relative;
}
.child2 {
grid-row: 4;
background: green;
position: relative;
align-self: end; /* ✅ 关键声明：确保 child2 在第四行内正确对齐并建立高度上下文 */
}
#grandchild1,
#grandchild2 {
background: yellow;
width: 100px;
}
#grandchild2 {
height: 50px; /* 推荐使用固定高度或 min-height，避免 % 高度失效风险 */
width: 90%;
background: orange;
}同时注意 HTML 中的细节优化：
- 为
<div> 添加 <code>name属性（与 JS 中getElementById兼容性更佳，但非必需）； - JavaScript 的
hideShow()函数逻辑简洁可靠，无需修改； -
.button2使用transform: translate(-50%, -50%)实现居中，依赖其父容器.child2已具备明确高度基准——而这正由align-self: end间接保障。 -
height: 100%在嵌套绝对定位场景中极易失效，建议孙元素优先使用min-height、flex布局或固定像素值； - 若需动态适配不同屏幕，可结合
clamp()或aspect-ratio进一步增强鲁棒性； -
align-self仅作用于单个网格项，不影响其他行，因此.child1无需额外设置（其span 3行为天然撑满）。
⚠️ 注意事项：
通过这一调整，.child2 不再“漂浮”于第四行顶部，而是锚定到底部并对齐出清晰的高度容器，使得 #grandchild2 的尺寸控制真正可控，隐藏/显示切换时布局零抖动。
