本文详解为何使用命名网格线时右侧 section 无法自动延伸至页脚底部，并通过 grid-row-end: span 2 精准控制行跨度，实现预期的垂直填满效果。
本文详解为何使用命名网格线时右侧 `section` 无法自动延伸至页脚底部，并通过 `grid-row-end: span 2` 精准控制行跨度，实现预期的垂直填满效果。
在 CSS Grid 布局中，仅定义 grid-column（列位置）并不足以确定元素在行方向上的覆盖范围——元素默认仅占据单一行轨道（即 grid-row: auto）。这正是问题的核心：你的 .section 元素虽被正确放置在 [section-start] / [section-end] 列范围内，但其行范围默认为 content-end 到 footer-start 之间的单一行轨道（即第3行），而下方 footer 占据了第4行，导致右下角出现未被填充的白色空白。
要使 .section 同时跨越内容区与页脚所在的两行轨道（即从 content-end 行开始，向下跨 2 行），需显式设置行结束位置：
section {
grid-column: section-start / section-end;
grid-row-end: span 2; /* 关键修复：从当前隐式起始行向下跨越2行 */
background-color: coral;
}⚠️ 注意事项：
- grid-row-end: span 2 是相对定位，它基于元素隐式计算出的起始行线（此处为 content-end 所在行）向后扩展两行，等效于 grid-row: content-end / footer-end；
- 原代码中 grid-template-rows 存在拼写错误：[hrader-end content-start] 应为 [header-end content-start]（不影响布局逻辑，但建议修正以避免混淆）；
- 所有子元素均启用 display: flex 居中，该设置与网格定位正交，无需调整。
✅ 最终效果：.section 将垂直填满右侧从内容区底部到页脚底部的全部空间，彻底消除右下角空白，实现真正意义上的“L型”响应式布局（左侧主内容 + 右侧通栏功能区/侧边栏）。
立即学习“前端免费学习笔记（深入）”；
总结：Grid 布局中，列定位 ≠ 行覆盖；当需要元素纵向拉伸时，必须主动声明行方向的跨度（span N）或明确的起止线（start-line / end-line），这是掌握命名线高级用法的关键一环。
