grid-column和grid-row的起始线在斜杠前、结束线在后，如grid-column: 2 / 4；需配合grid-template-rows定义行轨道才能实现有效跨行；推荐用grid-area一次性设定四边定位，响应式中注意css优先级与变量控制。
grid-column 和 grid-row 的基础写法别写反
这两个属性控制项目在网格中的起止位置，但新手常把起始线和结束线顺序搞混。比如想让一个项目从第2条线开始、跨到第4条线，应该写 grid-column: 2 / 4，而不是 grid-column: 4 / 2——后者虽然不报错，但浏览器会自动交换值，实际效果还是 2/4，容易让人误以为写反了也没事。
- 斜杠前是起始线（start line），后是结束线（end line）；支持数字、命名线（如
grid-column: sidebar-start / sidebar-end）或关键字（span 2） - 如果只写一个值，比如
grid-column: 2，等价于grid-column: 2 / 3，即默认占一格 - 用
span时注意：它总是相对于起始线计算，grid-column: 2 / span 3表示从第2线开始，跨3列，终点是第5线
grid-row 跨行时高度塌陷的常见原因
明明写了 grid-row: 1 / 4，项目却只显示一行高，大概率是网格容器没定义足够的行轨道（grid-template-rows），或者用了 auto 导致行高被内容撑开而非预留空间。
- 如果容器没设
grid-template-rows，浏览器按“自动行”处理，每行高度由内容决定，跨行只是视觉上拉伸，实际布局仍按单行渲染逻辑走 - 想让跨行有明确高度，必须显式定义行轨道，例如
grid-template-rows: 100px 100px 100px或grid-template-rows: repeat(3, 100px) - 用
minmax()更灵活：grid-template-rows: repeat(3, minmax(80px, auto))，既保底又允许内容撑高
用 grid-area 一次性写完四边定位更安全
当同时设置行列起止时，分开写 grid-column 和 grid-row 容易漏掉某一项，导致回退到默认值（比如 auto），反而让项目跑到意外位置。直接用 grid-area 更紧凑、不易出错。
-
grid-area接受四个值：grid-area: row-start / column-start / row-end / column-end - 例如
grid-area: 2 / 1 / 4 / 3等价于grid-row: 2 / 4; grid-column: 1 / 3 - 支持命名区域（
grid-area: header），但前提是容器已用grid-template-areas定义过该名称 - 如果只给两个或三个值，缺失部分会按规则补全，但不如写全四值来得直观可控
响应式中重定义 grid-column 时的覆盖陷阱
在媒体查询里改 grid-column，比如从 grid-column: 1 / 3 变成 grid-column: 1 / -1，看似简单，但若原始规则带权重更高（比如在更具体的选择器下），新规则可能压不住旧规则，项目卡在旧位置不动。
立即学习“前端免费学习笔记（深入）”；
- CSS 层叠优先级没变，只是属性值变了；检查开发者工具里该属性是否被划掉（strikethrough）
- 避免用内联样式覆盖外部样式表里的
grid-column，内联样式的优先级虽高，但难以维护且无法被媒体查询接管 - 更稳妥的做法：所有网格定位统一写在媒体查询块内，或用 CSS 自定义属性间接控制，比如
grid-column: var(--col-start) / var(--col-end)
跨行跨列看着简单，真正卡住人的往往是线号数错、轨道没铺够、或者响应式切换时样式没真正生效——这些地方没报错，但布局就悄悄偏了。
