CSS grid如何独立设置grid-column起始位置且保留原有跨列跨度

解决方案 #

直接单独设置grid-column-start属性即可，不要使用grid-column简写属性赋值。

原理说明 #

grid-column是grid-column-start和grid-column-end两个属性的合并简写，直接对grid-column赋值会同时覆盖起始位置、结束位置的原有规则，所以才会清空之前定义的跨列跨度。
单独修改grid-column-start只会覆盖起始位置配置，原有已定义的跨列规则会完全保留，刚好匹配需求。

修正后代码示例 #

.foo {
    grid-column: span 2;
}

.bar {
    /* 仅指定列起始位置，原有跨2列的规则保留 */
    grid-column-start: 1;
}

最终.bar元素的渲染效果等价于grid-column: 1 / span 2，且不需要提前知道原有跨列的具体数值。
如果需要固定结束位置、保留原有跨度，同理单独设置grid-column-end即可。

内容的提问来源于stack exchange，提问作者run_the_race