grid-column 和 grid-row 用于控制网格项的跨列跨行布局，通过起始线/结束线或 span 设置跨越范围，支持隐式轨道创建与负值反向计数，结合命名线条提升可读性，实现复杂界面布局。
在使用 CSS Grid 布局时，grid-column 和 grid-row 是控制网格项跨越多列或多行的关键属性。它们让开发者可以灵活地定义元素在网格中的起始和结束位置，实现复杂的布局结构。
grid-column 控制跨列
通过 grid-column 可以指定一个元素从哪一列开始、到哪一列结束，从而实现横向跨列。
语法：- grid-column: 起始线 / 结束线;
- 也可以使用 span 关键字表示跨越的轨道数量
例如：
.item {
grid-column: 2 / 4; /* 从第2条线开始，到第4条线结束，占据2列 */
}
.full-width {
grid-column: 1 / -1; /* 从第一列开始，到最后一条线，横跨整个容器 */
}
.wide {
grid-column: span 3; /* 向前跨越3列，结束位置自动计算 */
}
grid-row 控制跨行
grid-row 的用法与 grid-column 相同，用于控制元素在垂直方向上跨越多少行。
立即学习“前端免费学习笔记（深入）”；
示例：
.header {
grid-row: 1 / 3; /* 占据第1行到第3行之间的空间（即跨2行） */
}
.sidebar {
grid-row: span 2; /* 自动向上跨越2行 */
}
简写与隐式创建网格轨道
即使没有显式定义足够的行或列，Grid 容器也会自动创建隐式轨道来容纳跨越内容。
- 使用 span 能更直观表达“跨越几个单元格”
- 负值可用于从末尾反向计数，如
-1表示最后一根线 - 命名线条也可用于提升可读性（配合 grid-template-columns/rows 使用）
基本上就这些。掌握 grid-column 和 grid-row 的跨度设置，就能轻松实现卡片布局、表单排版、仪表盘等复杂界面结构。不复杂但容易忽略的是线编号从1开始，且跨越行为不会影响其他项目的自动排列逻辑。
