grid-column列线编号从1开始，命名更可靠；span后须为正整数，仅grid-column-start支持span；现代浏览器均支持，但IE完全不支持，调试推荐使用DevTools Grid Overlay。
grid-column 是最直接的定位方式，但“快速”不等于“随便写个数字”，关键在理解列线编号和命名规则。
grid-column 的值到底怎么数
列线编号从左到右、从 1 开始，不是从 0。容器定义了 grid-template-columns: 100px 200px 1fr，就生成 4 条垂直列线：1（最左）、2（第一列右边界）、3（第二列右边界）、4（最右）。所以 grid-column: 2 / 4 表示从第 2 条线开始、到第 4 条线结束，横跨第 2 和第 3 列。
- 写
grid-column: 1等价于grid-column: 1 / 2，只占一列 - 写
grid-column: 1 / span 2和grid-column: 1 / 3效果相同，但前者更语义化 - 如果容器用
repeat(5, 1fr)，列线总数是 6，最大可用线号是 6，grid-column: 1 / 7会无效
命名列线比数字更可靠
靠数字硬编码容易出错，尤其当列数动态变化或复用样式时。用自定义名称能避免“数错线”的问题。
- 先在容器定义命名：
grid-template-columns: [start] 1fr [main] 2fr [end]; - 项目直接使用：
grid-column: start / end;或grid-column: main / end; - 命名支持重复，比如
[col] 100px [col] 100px [col]，此时grid-column-start: col会匹配第一条col线
span 后面不能跟负数或 0
span 表示跨越单元格数量，必须是正整数。写成 grid-column: 3 / span -1 或 span 0 会被浏览器忽略，退回到 auto 行为——也就是按文档流顺序自动放置。
立即学习“前端免费学习笔记（深入）”；
-
grid-column-start: span 2是合法的，表示该项目自身宽度占两列（起点由布局自动推导） -
grid-column-end: span 2没有意义，grid-column-end只接受线号或auto，不支持span - 想让元素从某线开始并固定跨 2 列，只写
grid-column: 2 / span 2就够了，不用拆开设两个属性
容易被忽略的兼容性细节
所有现代浏览器都支持 grid-column，但 IE 完全不支持 Grid 布局。如果项目同时用了 float 或 display: inline-block，这些声明在启用 display: grid 后会失效——不是被覆盖，而是被彻底忽略。
- 调试时发现元素没按预期排列，先检查父容器是否真设了
display: grid，且子元素是直接子级 - 用 DevTools 的 Layout 面板看“Grid Overlay”，能直观看到列线编号和命名，比手动数靠谱得多
- 命名列线在 Safari 15.4+ 才完全稳定，旧版 Safari 对重复命名的支持有偏差
