如何使用 CSS Grid 实现移动端堆叠:桌面端交错图文布局

本文详解如何通过 CSS Grid 的 grid-auto-flow: dense 与 nth-child 选择器，让图文卡片在移动设备上垂直堆叠，在 ≥768px 屏幕中自动重排为“右图左文”交替布局，无需改变 HTML 结构。

本文详解如何通过 css grid 的 grid-auto-flow: dense 与

要实现「移动端单列堆叠、桌面端图文交错（第二行起：右侧图片 + 左侧文字）」的响应式网格重排序，核心在于利用 css grid 的自动填充流（dense packing） 和精确项定位能力，而非依赖 flexbox 或 javascript。

✅ 布局逻辑解析

• 移动端（默认）：所有 .item 占满 12 列（grid-column-start: span 12），自然垂直堆叠；
• 桌面端（≥768px）：
  • 每个 .item 默认占 6 列（span 6），形成每行 2 栏；
  • 关键技巧：用 :nth-child(4n-1) 定位第 3、7、11… 项（即每组图文对中的图片项），将其显式放置到右侧（第 7–12 列）；
  • 用 :nth-child(4n) 定位第 4、8、12… 项（即每组图文对中的文字项），将其放置到左侧（第 1–6 列）；
  • 必须启用 grid-auto-flow: dense —— 它允许 Grid 跳过空缺区域，将后续项“回填”到前面已留出的空位中，从而实现视觉顺序与 DOM 顺序分离。

? 完整可运行代码

.container {  display: grid;  gap: 20px;  grid-template-columns: repeat(12, 1fr);}.container > * {  grid-column: span 12; /* 移动端全宽 */}@media (min-width: 768px) {  .item {    grid-column: span 6; /* 桌面端基础宽度：半列 */  }  /* 图片项 → 放置到右侧（列 7–12） */  .item:nth-child(4n-1) {    grid-column: 7 / span 6;  }  /* 文字项 → 放置到左侧（列 1–6） */  .item:nth-child(4n) {    grid-column: 1 / span 6;  }  /* 启用密集填充，使项能回填空位 */  .container {    grid-auto-flow: dense;  }}

<div class="container">  <div class="item"><img src="image1.jpg" alt="Image 1"></div>  <div class="item"><p>Text 1</p></div>  <div class="item"><img src="image2.jpg" alt="Image 2"></div>  <div class="item"><p>Text 2</p></div>  <div class="item"><img src="image3.jpg" alt="Image 3"></div>  <div class="item"><p>Text 3</p></div>  <!-- 更多项可无限追加，规律自动延续 --></div>

⚠️ 注意事项与最佳实践

• DOM 顺序必须严格交替：HTML 中需保持 <img> 在前、<p> 在后（即 1→2→3→4…），否则 nth-child(4n-1) 和 4n 的定位会错位；
• grid-auto-flow: dense 有副作用：若某些项被显式定位且位置冲突，Grid 可能打乱默认流顺序——因此仅建议用于可控的、规律性强的布局（如本例）；
• 为提升可维护性，可考虑添加语义类名（如 .item-image / .item-text），但本方案纯靠结构选择器，零侵入 HTML；
• 若内容动态加载或项数不固定，建议配合 :has()（现代浏览器支持）或 JS fallback 做兜底校验。

该方案轻量、纯 CSS、无 JS 依赖，完美契合渐进增强理念，是响应式图文网格重排序的经典实践。