Grid卡片跨行跨列需用grid-row: span 2等语法避免线号计算错误；auto-fit需容器有明确宽度；高度不一致时宜用嵌套布局或grid-auto-rows: auto；IE11不支持现代Grid跨行，应降级方案。
Grid卡片跨行跨列时，grid-row和grid-column怎么写才不乱
写错起止线号是导致卡片错位最常见原因。CSS Grid的行/列号从1开始计数，不是0；grid-row: 1 / 3表示从第1条线开始、到第3条线结束（即占2行），不是“从第1行到第3行”。跨列同理。
实际用法中，优先用span语法更直观：grid-row: span 2比grid-row: 2 / 4更不容易算错。尤其当容器有gap或隐式轨道时，显式写终点线号容易偏移。
-
grid-row: span 2—— 占2行，起点由Grid自动分配（比如放在第2个格子就从第2行开始） -
grid-row: 2 / span 2—— 从第2条线开始，向下跨2行（终点是第4条线） - 避免写
grid-row: 2 / 4，除非你明确画出了所有轨道线并确认了编号 - 用
grid-template-rows: repeat(4, 1fr)后，总共有5条线（0~4），别误以为只有4条
响应式卡片网格里，grid-template-columns用repeat(auto-fit, minmax(...))为什么有时不缩放
核心问题在于容器宽度没被正确约束，或者父元素没设width。auto-fit依赖可用空间计算列数，如果卡片容器是display: inline-grid或父级是float、position: absolute且未设宽，可用空间可能为0或无限大。
另一个常见坑：在minmax()里用了em或rem但根字体大小被重置过，导致minmax(200px, 1fr)里的200px实际远小于预期。
- 确保卡片容器有明确宽度上下文，比如
width: 100%或max-width: 1200px - 用
auto-fit而非auto-fill，前者会合并空列，后者强行铺满 - 测试时临时加
border: 1px solid red看容器是否真的撑开了 - 移动端慎用
minmax(300px, 1fr)——小屏下300px可能超容器宽，整行直接塌缩成1列
卡片内容高度不一致时，grid-auto-rows设minmax(min-content, max-content)反而拉高整行
这是Grid的隐式行行为：只要某张卡片跨行，它就会强制整行（包括其他没跨行的卡片）按最大高度对齐。哪怕只有一张卡设了grid-row: span 2，它所在的两行都会被拉成一样高。
想让不同卡片保持各自高度又不破坏网格结构，得放弃“单网格统管全部”，改用嵌套策略：外层Grid控制布局位置，每张卡内部用display: contents或Flex微调内容对齐。
-
grid-auto-rows: auto通常比minmax()更可控，尤其内容高度差异大时 - 跨行卡片建议加
align-self: start，防止被默认stretch拉满 - 若必须等高，用
grid-auto-rows: 1fr+align-items: stretch，但要接受视觉上“空余空白” - 绝对不要给卡片设
height: 100%——Grid里100%是相对隐式行高，不是容器高
IE11兼容Grid跨行跨列？别试了，换方案
IE11只支持旧版Grid语法（2011草案），grid-row-start这类属性名都不认，span关键字完全无效。强行加前缀也跑不通，连display: -ms-grid都无法解析grid-row: 1 / -1这种现代写法。
真要兼容IE11，只能放弃Grid跨行能力，改用Flex wrap模拟多列，或用JS计算位置+绝对定位硬排。但代价是维护成本翻倍，响应式逻辑全得手写。
- 检查
caniuse.com可知，grid-row/grid-column在IE11中状态是“×” - PostCSS插件如
autoprefixer对IE11 Grid无能为力，它只处理前缀，不转换语法 - 如果项目仍需支持IE11，建议卡片网格降级为
float或inline-block，用媒体查询切布局 - 现代项目里，用
@supports (display: grid)做特性检测比UA判断更可靠
跨行跨列看着简单，实际牵扯轨道生成、隐式行分配、对齐传播三个层次。多数bug不是写错了哪一行，而是没意识到某张卡触发了整行重排——这时候删掉它的grid-row试试，往往就定位到了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
