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

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

要实现一个在移动端垂直堆叠、在桌面端又能自动交错排列的图文布局，听起来是不是需要复杂的 Ja vaScript 逻辑？其实不然。今天要分享的这个方案，完全依靠 CSS Grid 自身的强大能力，就能优雅地实现这个效果，而且对 HTML 结构零侵入。

布局逻辑解析

这个方案的核心，在于巧妙利用了 CSS Grid 的两个特性：密集填充模式和基于结构的选择器。整个逻辑可以拆解为两步：

• 移动端（默认）：这步很简单。我们让所有卡片项（.item）默认横跨全部 12 列（grid-column: span 12），它们自然就会从上到下垂直堆叠，符合小屏幕的浏览习惯。
• 桌面端（≥768px）：这才是魔法发生的地方。首先，我们将每个 .item 的基础宽度设为半行（span 6），这样一行就能放下两个项。接下来是关键：通过 :nth-child(4n-1) 精准选中第 3、7、11… 项（也就是每组图文对里的图片项），强制将其放置到右侧（第 7 到 12 列）。同时，用 :nth-child(4n) 选中紧随其后的第 4、8、12… 项（即文字项），将其定位到左侧（第 1 到 6 列）。

你可能会问，这样强制定位不会在网格里留下空洞吗？问得好。这就需要最后一步：为容器加上 grid-auto-flow: dense。这个属性允许 Grid 引擎“回填”——它会自动跳过那些因强制定位而产生的空缺，把后面的项目填充进去，从而实现视觉上的交错顺序，而无需改动 DOM 的物理顺序。

完整可运行代码

理论清楚了，来看具体实现。下面是核心的 CSS 代码：

.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;
  }
}

对应的 HTML 结构非常简洁，只需保持严格的交替顺序即可：

  

  
Text 1
  

  
Text 2
  

  
Text 3
  

注意事项与最佳实践

当然，任何精妙的方案都有其适用边界。在采用这个布局时，有几点需要特别注意：

• DOM 顺序是生命线：HTML 中必须严格保持“图片、文字、图片、文字…”的交替顺序。如果顺序错乱，:nth-child 选择器就会定位错误，导致布局崩塌。
• 理解 dense 的副作用：grid-auto-flow: dense 虽然解决了回填问题，但它也可能打乱项目的默认文档流顺序。因此，它更适用于眼下这种规律性强、内容模块化的布局，对于顺序敏感的内容（如时间线）则需慎用。
• 关于可维护性：本方案的最大优势是纯 CSS、零侵入。但如果团队协作或项目结构复杂，为图片和文字项添加语义化的类名（如 .item-image、.item-text）会是更稳妥的选择，虽然这会增加一点点 HTML 的负担。
• 动态内容的考量：如果页面内容是通过 AJAX 动态加载的，或者项数不固定，为了确保万无一失，可以考虑配合现代浏览器支持的 :has() 选择器进行兜底，或者准备一个轻量的 Ja vaScript 回退方案。

总的来说，这个方案充分体现了 CSS Grid 布局系统的强大与灵活。它轻量、高效，完全符合渐进增强的前端开发理念，堪称响应式图文交错布局的一个经典实践。下次遇到类似需求，不妨优先试试它。