首行大图需用 grid-column: 1 / -1 跨满整行；后续图文项须配合 grid-auto-flow: dense 和显式 grid-column 分配实现两列混排；响应式下需重置列数并清除子项列定位。
首行大图用 grid-column 跨列实现
Grid 中让首行图片占满整行，核心是让该 grid-item 的 grid-column 从第一列线跨到最后一列线。假设你定义了两列（grid-template-columns: 1fr 1fr），那就有三条列线（1 / 2 / 3），所以必须写 grid-column: 1 / -1 或 grid-column: 1 / 3——用 -1 更健壮，它自动指向隐式末列线，后续加列也不用改。
常见错误是只写 grid-column: 1 / 2（只占第一列）或漏掉起始线（如 grid-column: / -1），导致布局错位或无效。
示例结构：
article {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
article > img:first-child {
grid-column: 1 / -1;
}
其余内容用 grid-auto-flow: dense 避免空隙
默认 grid-auto-flow: row 会按顺序逐行填格子，但首行大图占了两行高（因跨列且自身高度大），后面紧接的图文项若高度不均，容易在第二行留下无法填充的空洞。这时需要 grid-auto-flow: dense 启用“紧凑填充”：允许后续项回填前面留下的空位。
注意：dense 不改变源顺序，只影响渲染位置；若依赖视觉顺序做可访问性或打印样式，得额外用 order 控制。
关键配置项：
-
grid-auto-flow: dense必须设在容器上，不是子项 - 搭配
grid-template-rows: auto（默认即如此），避免固定行高卡死布局 - 如果图文项本身有
grid-row声明，dense可能绕过它，慎用
图文项需明确指定列分布
首行之后的内容，默认会从第二行第一列开始顺序排列。要实现“两列图文混排”，不能只靠 auto-flow，得让每个图文块主动声明列位置，否则小图文字可能全挤在左列。
推荐做法：给每个图文项加类，用 :nth-child(n+2) 选中，再结合 grid-column 交替分配：
article > div:nth-child(2) { grid-column: 1; }
article > div:nth-child(3) { grid-column: 2; }
article > div:nth-child(4) { grid-column: 1; }
article > div:nth-child(5) { grid-column: 2; }
更灵活的方式是用 grid-column: auto 配合 grid-auto-flow: column，但会打乱 DOM 顺序，实际项目中易引发语义和 SEO 问题，不建议。
响应式断点要重置 grid-template-columns
在小屏下，两列变一列是刚需。但直接用 @media 改 grid-template-columns: 1fr 会导致首图仍跨 1 / -1——这在单列下没问题，可后续图文项若还维持两列的 grid-column 声明（比如 grid-column: 2），就会溢出或消失。
解决方案是：在断点内统一清除列定位，让所有后续项回归自动流：
@media (max-width: 768px) {
article {
grid-template-columns: 1fr;
}
article > div:nth-child(n+2) {
grid-column: auto; /* 清除之前设定的列 */
}
}
另一个坑是图片宽高比失真：首图设 width: 100% 后，若没配 aspect-ratio 或 height，缩放后可能拉伸。建议给首图加 aspect-ratio: 16/9 或用 object-fit: cover。
复杂点在于，dense 模式 + 跨列 + 响应式列数变化，会让浏览器重排逻辑变多；如果图文项高度差异极大（比如有的带三段文字，有的只有图标），依然可能出现意外空隙——这时得用 grid-row-end 手动控制行结束位置，但代价是维护成本上升。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
