Grid卡片跨行跨列需用grid-row: span 2等语法避免线号计算错误auto-fit需容器有明确宽度高度不一致时宜用嵌套布局或grid-auto-rows: autoIE11不支持现代Grid跨行应降级方案。Grid卡片跨行跨列时grid-row和grid-column怎么写才不乱写错起止线号是导致卡片错位最常见原因。CSS Grid的行/列号从1开始计数不是0grid-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它所在的两行都会被拉成一样高。 唱鸭 音乐创作全流程的AI自动作曲工具集 AI 辅助作词、AI 自动作曲、编曲、混音于一体