填 grid-column 或 grid-row 时需确保线号在有效范围内：正向从1开始，负值从末尾倒数（-1为最后一根线）；越界会自动修正为auto或截断，导致元素消失或错位。
grid-column 和 grid-row 怎么填才不越界
填错 grid-column 或 grid-row 的值，最直接的后果是元素“消失”或“叠在别的格子上”，不是浏览器报错，而是渲染不可见——因为 CSS Grid 默认把越界的起始线当作 auto 处理，终点线则被截断到最大可用线号。
- 网格线编号从 1 开始，正向数；负值从末尾倒数，
-1是最后一根线（不是最后一个格子） - 写
grid-column: 2 / 5表示“从第 2 根线开始，到第 5 根线结束”，实际占 3 列（不是 4） - 如果定义了 4 列，却写
grid-column: 1 / 6，终点线 6 不存在，浏览器会按1 / -1渲染（即撑满剩余列），但若父容器没设grid-template-columns，行为更难预测 - 用命名线（如
grid-column: sidebar / main）前，必须先在grid-template-areas或grid-template-columns/rows中声明，否则无效
不规则布局里 grid-area 和 line-based 写法怎么选
grid-area 看起来简洁，但只适合固定区域命名；真正要动态控制跨行跨列、尤其是响应式下调整跨度时，grid-column + grid-row 更直接、可读性更高。
-
grid-area: header要求你提前定义grid-template-areas: "header header" "main sidebar"，一旦某块内容需要在小屏变单列，整个grid-template-areas得重写 - 而
grid-column: 1 / -1+grid-row: 1在媒体查询里只需改一行，就能让 header 撑满全宽 - 注意：
grid-area是 shorthand，它会覆盖grid-row-start、grid-column-end等独立属性，混用容易覆盖出错
跨行元素被其他格子“挤变形”的常见原因
Grid 本身不会主动拉伸跨行项，但它的尺寸受轨道（track）约束。所谓“挤变形”，通常是行高、内容溢出或 align-self/justify-self 配合不当导致的视觉错觉。
- 如果某行设了
grid-template-rows: 100px 1fr，而一个跨两行的元素内容高度超 100px，它会撑开第一行，第二行自动收缩，看起来像“被压扁” - 跨行元素默认
align-self: stretch，但如果父容器align-content: start，且轨道有空隙，它可能只占自身内容高度，而非填满跨越范围 - 用
minmax(0, 1fr)替代1fr可避免内容撑不开跨行项（尤其内部有 flex 或绝对定位子元素时）
Firefox 和 Safari 对负索引跨行的支持差异
负值线号（如 grid-row: -2 / -1）在 Chrome 和新版 Edge 上表现一致，但在 Safari ≤ 16.6 和部分旧版 Firefox 中，终点为 -1 时可能被解析为“末尾前一线”，而不是“最后一根线”。
立即学习“前端免费学习笔记（深入）”；
- 测试发现：Safari 16.4 下
grid-row: 1 / -1有时只跨到倒数第二行，漏掉最后一行 - 稳妥做法是显式计算正向线号，或用
span语法：grid-row: 1 / span 3比1 / 4更易维护，也避开了负索引兼容性问题 - 如果必须用负值，建议加
@supports (grid-row: 1 / -1)做降级兜底
跨行跨列看着自由，其实每条线号都卡着布局节奏；手写 grid-column 和 grid-row 时，盯着开发者工具里的网格线 overlay 看两秒，比查文档更快定位错在哪。
