grid-column和grid-row生效需父容器设display: grid，仅作用于直接子元素；值指网格线范围而非行列序号，如2/4表示跨第2、3列，span 2表示跨2栏，负值如-1/-3须起始线编号小于结束线编号。
grid-column 和 grid-row 怎么写才生效
必须确保父容器是 display: grid，否则 grid-column 和 grid-row 完全被忽略。这两个属性只对直接子元素（即 grid item）起作用，嵌套子元素无效。
它们的值不是“第几行/列”，而是“跨越哪一段网格线”。比如 grid-column: 2 / 4 表示从第 2 条竖向网格线开始，到第 4 条结束（即占第 2、3 列）。
-
grid-column: 1等价于grid-column: 1 / 2 -
grid-column: span 2表示跨 2 栏，起始位置由浏览器自动计算（通常紧接前一个 item） -
grid-row: -1 / -3是合法的，表示从倒数第一条线到倒数第三条线（注意顺序：起始线编号必须小于结束线编号，否则不渲染）
用数字 vs 用名字定位的区别
数字基于隐式或显式定义的网格线编号；名字则依赖你提前用 grid-template-rows 或 grid-template-columns 命名的区域线。名字更易维护，但容易拼错且不报错——写错就回退成默认位置。
例如父容器设了：
grid-template-columns: [start] 1fr [content] 2fr [end];那么 item 可以写
grid-column: start / content。但若写成 grid-column: star / content（少个 t），CSS 会静默失败，item 落在第一格。
立即学习“前端免费学习笔记（深入）”；
- 命名线支持重复名，如
[sidebar] 200px [sidebar]，此时grid-column: sidebar / sidebar会跨 0 栏（不可见） - 数字方式更直觉，适合简单布局；命名更适合多人协作或复杂响应式场景
常见错位原因：起始线超出范围 or 隐式网格未启用
如果写了 grid-row: 5 但父容器只定义了 3 行（grid-template-rows: 100px 100px 100px），浏览器会自动创建隐式网格行，但高度为 auto（可能塌陷）。这时候 item 看似“消失”，其实是被挤到极小高度里了。
- 检查是否意外设置了
grid-auto-rows: 0或min-height: 0，这会让隐式行不可见 -
grid-row: 1 / -1并不会撑满所有行，它只到最后一行的**末尾线**，而隐式行在那之后——所以实际只覆盖显式定义的行 - 用 DevTools 的 Layout 面板勾选 “Show line numbers” 能直观看到每条网格线编号，避免数错
grid-column-end 为 auto 时的行为很关键
当你只写 grid-column: 2，等价于 grid-column-start: 2; grid-column-end: auto。这个 auto 不是“到末尾”，而是“到下一个 grid-column-start 相同的 item 的起始线”，或者如果后面没别的 item，就只占 1 栏。
这意味着：多个 item 写相同 grid-column: 2，它们会纵向堆叠在同一列里（发生重叠），而不是自动换行。
- 想避免重叠，要么显式指定
grid-row，要么用grid-column: 2 / -1强制跨到末尾 -
grid-row: auto同理——它由 grid flow 算法决定，受grid-auto-flow（默认row）控制，不是“填空式”智能排布
