Grid 布局中 header 与 aside 如何通过网格线跨列显示
当使用 grid-column 属性指定 header 与 aside 的结束网格线时，若数值设置错误会导致元素位置错乱。
检查网格线数值与元素跨度的关系
在 Grid 布局中，元素跨越网格线需要指定起始线和结束线的位置。例如，使用 grid-column: 1 / 3 表示元素从第 1 条网格线开始，到第 3 条网格线结束。如果起始线的数值大于或等于结束线的数值，元素将无法正确放置，导致位置错乱。这种错误通常发生在手动计算网格线编号时，或者误用了 auto 关键字。
可以通过在浏览器开发者工具中检查元素的网格线位置来验证。在 CSS 中添加 border 属性或使用 grid-gap 来可视化网格线，观察元素是否跨越了预期的区域。如果发现元素被压缩或重叠，说明起始线和结束线的数值关系不正确。
使用简写属性简化跨行跨列设置
除了使用 grid-column-start、grid-column-end 等长属性外，还可以使用简写属性 grid-column 和 grid-row 来同时指定起始线和结束线。简写属性的语法是“起始线 / 结束线”，例如 grid-column: 1 / 3。这种写法更加简洁，减少了代码量，也降低了出错的可能性。
在编写 CSS 时，建议优先使用简写属性。例如，将 grid-column-start: 1; grid-column-end: 3; 替换为 grid-column: 1 / 3。这样可以确保起始线和结束线的数值在同一行中，便于检查和调试。
验证网格线编号与文档书写模式的关系
网格线的编号与文档的书写模式有关。在从左到右的书写模式（如英语）中，第 1 条网格线在左侧；在从右到左的书写模式（如阿拉伯语）中，第 1 条网格线在右侧。如果文档的书写模式发生变化，网格线的编号方向也会随之改变，这可能导致元素跨越网格线时位置错乱。
可以通过修改 writing-mode 属性来测试网格线编号的变化。例如，将 writing-mode 设置为 vertical-rl，观察网格线编号是否从右侧开始。如果元素跨越网格线时位置异常，可能需要调整起始线和结束线的数值，以适应新的书写模式。
排查 auto-placement 与显式定位的冲突
如果未显式指定元素的网格位置，Grid 布局会自动将元素放置在网格中，这称为 auto-placement。当显式指定了元素的网格位置（如使用 grid-column 或 grid-row）时，auto-placement 会被覆盖。如果显式定位的数值不正确，可能会导致元素位置错乱。
可以通过移除显式定位的属性，观察元素是否恢复到 auto-placement 的默认位置。如果移除后位置正常，说明显式定位的数值有问题。建议在显式定位时，确保起始线和结束线的数值正确，并且与网格线的编号一致。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。