Grid排版跨页错位主因是混淆网格定义与内容结构；应按断点显式声明grid-template-areas，禁用grid-column线性定位，非对称布局改用手动行列坐标，慎用fr单位并统一区域语义命名。
跨页面排版差异不是 Grid 本身的问题，而是你把“网格定义”和“内容结构”混在了一起——Grid 只管空间划分，不管语义归属；不同页面的标题、侧栏、引述块位置不同，硬套同一套 grid-template-areas 或固定 grid-column 值必然错位。
用 grid-area 配合媒体查询重排，别依赖 DOM 顺序
移动端堆叠、桌面端分栏这类变化，靠改 grid-template-areas 字符串最稳。关键不是写一次模板，而是每个断点都显式声明：
- 移动端必须写
grid-template-areas: "header" "title" "content" "sidebar"，漏掉任意一行，没声明的元素会掉进隐式网格，位置不可控 - 桌面端改成
"header header" "title sidebar" "content content"，所有区域名（如sidebar）必须在对应子元素上真实存在grid-area: sidebar - 不要用
grid-column: 2这类线性定位去“猜”位置，它不随区域语义迁移，换页面就失效
非对称排版必须放弃 grid-template-areas
grid-template-areas 要求每行区域名对齐、矩形连续、不能跳格，根本没法处理 L 形标题、斜跨图文或呼吸感留白。真要艺术感，直接手动定坐标：
- 写
grid-row: 1 / 4; grid-column: 2 / 5;明确占哪几行哪几列，比命名区域更自由 - 用命名线提升可读性：
grid-template-columns: [left] 1fr [main] 2.4fr [right] 0.8fr;，再写grid-column: left / main; - 禁用
grid-auto-flow: dense——它会把小元素塞进你刻意留的空隙，破坏视觉节奏
fr 单位在跨页时容易拉伸失衡
fr 按剩余空间比例分配，但不同页面内容高度差异大（比如一页全是短段落，另一页有长图+列表），会导致某一行被撑得极长。这不是 bug，是设计逻辑：
立即学习“前端免费学习笔记（深入）”；
- 主内容区慎用纯
1fr，改用minmax(60px, auto)或加max-height限制 - 侧栏、广告图等固定功能模块，用
250px或minmax(250px, max-content)，别让它参与 fr 分配 - 打印样式表里
fr不可靠，媒体查询中应切换为em或px
真正难的不是怎么写 CSS，而是每个页面的区域命名是否贯穿所有断点、是否语义一致——grid-area: cta-button 在首页叫 hero-cta，在详情页又变成 action-bar，整个网格模板就断了。
