通过grid-column-start和grid-row-start可精确控制网格项起始位置，如.item{grid-column-start:2;grid-row-start:3}表示从第2条垂直线和第3条水平线开始；配合end属性或span关键字能定义占据范围，例如grid-column:2/4或grid-column-end:span 2实现跨列布局；常用于不规则排版，如.header{grid-column:1/-1}使头部横跨所有列，掌握这些规则可灵活构建复杂页面结构。
在css grid布局中，控制子元素的起始位置是实现精确排版的关键。通过grid-column-start和grid-row-start属性，可以明确指定某个网格项从哪一列或哪一行开始显示。
grid-column-start 与 grid-row-start 基本用法
这两个属性分别定义网格项在列和行上的起始线位置。
grid-column-start 设置元素从第几条垂直网格线开始；grid-row-start 设置元素从第几条水平网格线开始。网格线编号从1开始，也可以使用负数或命名线。
例如：
.item { grid-column-start: 2; grid-row-start: 3; }表示该元素从第2条垂直线（即第二列左侧）开始，从第3条水平线（即第三行顶部）开始。
结合 end 属性控制占据范围
只设置 start 可能不足以完整定义布局，通常配合 -end 属性使用。
常用组合方式：
-
grid-column-start: 2; grid-column-end: 4;—— 占据第2到第4条线之间的区域（即跨两列） -
grid-row-start: 1; grid-row-end: 3;—— 跨越两行
也可简写为：
.item { grid-column: 2 / 4; grid-row: 1 / 3; }使用 span 关键字简化设置
除了指定结束线，还可以用 span 让元素跨越若干行或列。
示例：
.item { grid-column-start: 2; grid-column-end: span 2; }等价于从第2条线开始，向右跨2列。同样适用于 row 方向。
实际应用场景
这类设置特别适合不规则布局，比如卡片式设计、表单排列或突出主内容区域。
典型例子：
.header { grid-column: 1 / -1; /* 横跨所有列 */ } .sidebar { grid-row-start: 2; grid-column-start: 1; } .main-content { grid-row-start: 2; grid-column: 2 / 4; }这样可以灵活安排侧边栏和主区在同一行但不同列的位置。
基本上就这些。掌握 grid-column-start 和 grid-row-start 能让你更自由地控制Grid子元素的布局起点，再结合 end 和 span，就能应对大多数复杂排版需求了。不复杂但容易忽略的是：网格线是从1开始计数的，别当成0索引处理。