grid-row 与 grid-column 用于精确控制网格项的行和列位置，支持通过数字、span 关键字或命名线定义起始与结束线，实现灵活布局；使用 span 可简化跨行列设置，命名线提升代码可读性，配合 z-index 处理重叠，合理规划可构建清晰高效的复杂网格布局。
在CSS Grid布局中，grid-row 和 grid-column 是控制子元素在网格中位置的核心属性。它们能让你精确指定一个元素从哪一行或列开始，到哪一行或列结束，从而实现灵活的页面布局。
理解 grid-row 与 grid-column 的基本语法
这两个属性用于定义网格项跨越的行或列范围，支持起始线和终止线的设置：
- grid-row: <起始行> / <结束行>;
- grid-column: <起始列> / <结束列>;
例如，grid-row: 2 / 4; 表示该元素从第2条网格线开始，跨越到第4条网格线（即占据第2和第3行）。
使用 span 关键字简化跨行列设置
不想计算结束线？可以用 span 来指定跨越多少行或列：
-
grid-column: 1 / span 3;—— 从第1列开始，横跨3列 -
grid-row: 3 / span 2;—— 从第3行开始，占2行高度
这种方式更直观，尤其适合响应式设计中动态调整布局。
通过网格线名称提升可读性
除了数字，你还可以在定义网格容器时命名网格线，让代码更清晰：
.container {
display: grid;
grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
}
.item {
grid-column: sidebar-start / sidebar-end;
}
使用语义化名称能显著提高维护性，特别是在复杂布局中。
避免重叠与处理冲突定位
当多个子元素被定位到相同区域时，会出现重叠。可通过 z-index 控制层级：
- 默认情况下，后定义的元素会覆盖前面的
- 添加
z-index: 1;可手动调整堆叠顺序
合理规划布局结构，尽量减少不必要的重叠，保持结构清晰。
基本上就这些。掌握 grid-row 与 grid-column 的用法，再结合命名线和 span，就能高效构建各种复杂且易维护的网格布局。不复杂但容易忽略细节，多练几次就顺了。
