跨列卡片布局需用repeat(auto-fit, minmax(280px, 1fr))定义列轨道，配合grid-auto-rows: minmax(200px, 1fr)和align-items: stretch实现等高对齐，子容器须设min-width: 0与min-height: 0防撑破布局。
grid-template-columns + auto-fit 配合 gap 才能稳住跨列卡片
直接给 grid-column: span 2 的卡片加 gap 不会“拉宽”它，反而会让其他正常卡片的间距变大，导致网格错位。真正起作用的是外层容器的 grid-template-columns 必须支持弹性轨道分配，否则跨列项会撑破布局或触发意外换行。
必须用 repeat(auto-fit, minmax(280px, 1fr)) 这类函数式写法——auto-fit 能让空闲轨道自动收缩，minmax() 则确保每列有底线宽度又可伸缩。如果写成 repeat(4, 1fr) 或固定像素列，跨列卡片一出现，剩余列就挤不下了，浏览器只能强行折行或溢出。
-
minmax(280px, 1fr)中的280px是底线，低于该宽度时列数自动减少，避免卡片被压扁 - 跨列卡片（如
grid-column: span 2）实际占满两道轨道间隙，但它的宽度仍由这两列的总和决定，不是靠gap拉出来的 - 别在跨列项上设
width或flex-basis，这会干扰 Grid 自动计算，尤其在响应式断点下极易断裂
gap 只控制轨道间隙，跨列卡片的“对齐错觉”要靠 align-items 和 grid-auto-rows
看到跨列卡片和其他卡片底部不齐，不是 gap 没生效，而是外层网格没强制等高。Grid 默认不拉齐行高，gap 再准也救不了视觉错位。
关键两步：align-items: stretch（确保卡片高度拉满行轨道），加上 grid-auto-rows: 1fr（让所有隐式行都均分高度）。如果只设 grid-template-rows: 1fr，那只对显式定义的行有效，新增的跨列行还是按内容高度走。
-
align-items: stretch是默认值，但容易被父级align-items: start或 flex 容器覆盖，得检查 computed styles -
grid-auto-rows: minmax(200px, 1fr)比单纯1fr更稳妥，防止内容过少时卡片塌缩 - 跨列卡片若含图片，记得设
img { width: 100%; height: auto; }，否则图片原始尺寸会破坏行高一致性
gap 在跨列场景下最容易被误用的三个地方
gap 看似简单，但在跨列卡片里，三处常见误操作会让整个网格“飘”起来：一是混用 margin，二是写错单位顺序，三是忽略 Safari 兼容性断层。
- 给跨列卡片加
margin: 0 1rem—— 这会和gap叠加，造成左右多出一倍空白，且破坏 Grid 对齐基准 - 写
gap: 0.5rem 1rem却以为第一个值是列距，实际是行距（row-gap），列距反而是第二个值；错位后很难排查 - Safari 14.0 及更早版本不支持单值
gap: 1rem，必须拆成row-gap: 1rem; column-gap: 1rem;，否则跨列卡片周围间隙消失，只剩内容挤在一起
跨列卡片内容截断？先关掉子项的 min-width 默认锁定
卡片内部文字或图片突然被裁剪、换行异常，大概率不是 gap 的问题，而是跨列项的子元素触发了 flex/grid 子项的默认 min-width: auto 行为——它拒绝收缩，硬把整列撑开，间接导致后续行错位。
解决方案非常具体：在跨列卡片的直接子容器（比如 .card-body）上加 min-width: 0 和 min-height: 0。这不是锦上添花，是 Grid/Flex 布局中应对跨列内容的必要刹车。
- 仅加
min-width: 0不够，如果卡片内有垂直长内容（如多段落），还得同步加min-height: 0 - 不要试图用
overflow: hidden强行遮盖，那只是掩盖问题，实际布局空间已被撑爆 - 这个设置必须加在跨列卡片的**第一层子容器**上，套得越深，越容易漏掉
跨列卡片布局真正的难点，从来不在怎么“跨”，而在于如何让跨出去的部分，依然被网格的轨道逻辑牢牢约束住——gap 只是其中一环，它既不能替代轨道定义，也不能掩盖子项尺寸失控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
