本文详解为何使用命名网格线时右侧 section 无法自动延伸至页脚区域，并通过 grid-row-end: span 2 正确跨越两行，实现预期的右下角红色区块完整填充。
本文详解为何使用命名网格线时右侧 `section` 无法自动延伸至页脚区域，并通过 `grid-row-end: span 2` 正确跨越两行，实现预期的右下角红色区块完整填充。
在 CSS Grid 布局中，仅通过 grid-column 指定列范围（如 section-start / section-end）并不足以决定元素的行方向跨度——元素默认仅占据一个网格行轨道（即 span 1）。这正是问题根源：.section 虽被定位在右侧列（1fr 宽度），但其隐式 grid-row: auto / auto 仅将其放置在 content-end 与 footer-start 之间的单一行内，导致下方 footer 所在的行轨道未被覆盖，从而留下白色空白。
要让 .section 同时覆盖内容区下方和页脚所在行，需显式声明其行方向跨度。正确做法是在 .section 规则中添加：
section {
grid-column: section-start / section-end;
grid-row-end: span 2; /* 关键修复：向下跨越 2 行轨道 */
background-color: coral;
}此处 grid-row-end: span 2 等价于 grid-row: auto / span 2，表示从其默认起始行（由 Grid 自动计算，即 content-end 行线之后的第一行）开始，向下跨越 2 个行轨道，恰好覆盖 footer-start 至 footer-end 的整个区域。
✅ 验证逻辑：观察 grid-template-rows 定义：
立即学习“前端免费学习笔记（深入）”；
grid-template-rows: [header-start] 1fr [header-end content-start] 3fr [content-end footer-start] 1fr [footer-end];共定义了 3 个显式行轨道（1fr, 3fr, 1fr），对应 4 条命名线：header-start → header-end/content-start → content-end/footer-start → footer-end。
因此，footer-start 到 footer-end 是第 3 个轨道；而 section 需从 content-end（即第 2 行末）后开始，跨越第 3 行（页脚行）——故 span 2 精准命中。
此外，请注意原代码中存在一处拼写错误：[hrader-end content-start] 应为 [header-end content-start]（hrader → header），虽不影响当前渲染（浏览器会忽略无效命名），但建议修正以保障可维护性。
最终推荐写法（含修正与增强）：
.container {
height: 100vh;
display: grid;
/* 修正拼写，并优化命名可读性 */
grid-template-columns:
[header-start content-start footer-start] 4fr
[content-end footer-end section-start] 1fr
[header-end section-end];
grid-template-rows:
[header-start] 1fr
[header-end content-start] 3fr
[content-end footer-start] 1fr
[footer-end];
gap: 10px;
padding: 10px;
}
section {
grid-column: section-start / section-end;
grid-row: content-end / footer-end; /* 更语义化写法：明确起止线 */
background-color: coral;
}使用 grid-row: content-end / footer-end 替代 span 语法，语义更清晰，且避免依赖隐式起始位置，是更健壮的实践方案。两者效果等价，但后者在复杂布局中更易调试与协作。
