grid布局跨格失效主因是线号超出隐式网格范围，需显式定义足够列线；对齐需区分容器级与项目级属性；响应式须同步调整轨道与区域声明；subgrid兼容性差需降级处理。
Grid布局中grid-column和grid-row的跨格写法容易错在哪
报刊封面常见的大标题跨三列、作者栏跨两行，靠grid-column和grid-row控制起止线最直接，但很多人写成grid-column: 1 / 4却没效果——问题常出在线号理解偏差或隐式网格未定义。
实际要跨3列（比如从第1条线到第4条线），必须确保容器至少有4条列线；若只设了grid-template-columns: repeat(3, 1fr)，那第4条线根本不存在，浏览器会静默忽略该声明。
- 显式声明列数：用
grid-template-columns定死列轨道，别依赖auto-fit或auto-fill在封面这种固定结构里 - 起止值用线号更稳妥：优先写
grid-column: 1 / 4而非grid-column: span 3，后者在嵌套Grid或subgrid下行为不一致 - 跨行时注意
grid-row默认只占1行高：如果目标区域高度不够，内容会被裁切，得配合min-height或grid-auto-rows预留空间
图片与文字在Grid里对不齐？检查align-items和justify-self的层级关系
封面里一张竖图左对齐、标题右对齐、副标居中，看似简单，但align-items: center设在容器上，会覆盖子项自己的justify-self，导致所有元素全被强行居中。
关键在分清作用域：align-items/justify-items是容器级默认对齐，而align-self/justify-self才是单个子项的覆盖开关。图文混排时，后者更可控。
立即学习“前端免费学习笔记（深入）”；
- 容器统一设
align-items: stretch（默认值），把对齐决策权交给子项自己 - 图片加
justify-self: start，标题加justify-self: end，副标加justify-self: center - 如果图片用了
object-fit: cover还偏位，大概率是父容器没设height，Grid不会自动撑高，得明确给min-height或aspect-ratio
响应式封面在小屏崩坏？别只改grid-template-columns
PC端6列布局切到手机变成1列，很多人只改grid-template-columns: 1fr，结果大标题还是横跨整行、留白失控——因为grid-column的线号没重置，原来1 / 4在单列下等于“从第1条线到第4条线”，但此时只有2条线（0和1），声明失效后回退到默认1格宽度，视觉上就缩成一小块。
响应式Grid必须同步调整轨道定义和区域声明，不能只动一边。
- 用
@container代替@media更精准：封面区域常是max-width: 1200px的块，给它加container-type: inline-size，然后用@container (max-width: 480px)写断点 - 小屏下重定义
grid-template-columns的同时，用grid-column: 1 / -1让标题占满整行，比硬写1 / 2更可靠 - 避免在媒体查询里重复写
grid-area，优先用grid-column/grid-row微调位置，减少维护成本
Firefox里subgrid报错Invalid property value怎么办
想让作者信息区内部也用Grid对齐头像和名字，又希望它继承外层封面的列线，自然想到display: grid + grid-template-columns: subgrid。但Firefox直到118才支持subgrid，且只支持一维（subgrid只能用于grid-template-columns或grid-template-rows之一，不能同时）。
生产环境直接用subgrid风险高，尤其报刊封面常需兼容旧版浏览器。
- 查Can I Use确认目标用户浏览器版本，别只看“支持”就开用
- 降级方案：外层Grid用
grid-template-areas定义语义区域，子容器用display: contents让子元素直接受外层Grid控制（注意display: contents会让元素失去盒模型，需确保无障碍属性不受影响） - 真要强依赖
subgrid，得加@supports (grid-template-columns: subgrid)包裹，并准备float或flex后备布局
跨行跨列不是堆CSS属性就能成的事，线号、轨道、容器尺寸、浏览器支持这四样少一个，排版就可能错位。动手前先用outline: 1px solid red套住每个Grid项，看线到底画在哪——肉眼比文档管用。
