如何用CSS Grid Auto-Flow实现响应式图文布局重排？

不需要给每对图文添加额外容器，仅靠原生Grid布局和nth-child选择器就能实现需求，以下是具体实现方案：

基础HTML结构 #

保持文本与图片按顺序直接排列在容器内即可：

<div class="lrcontainer">
  <div class="content-text">Text1</div>
  <div class="content-img">Img1</div>
  <div class="content-text">Text2</div>
  <div class="content-img">Img2</div>
  <div class="content-text">Text3</div>
  <div class="content-img">Img3</div>
  <!-- 可无限添加成对的文本/图片 -->
</div>

完整CSS代码 #

/* 移动端默认样式：单列布局，文本自然排在图片前 */
.lrcontainer {
  display: grid;
  width: 100%;
  align-items: center;
  grid-template-columns: 1fr;
  gap: 1.5rem; /* 可选：增加元素间距 */
}

/* 桌面端媒体查询（可根据需求调整断点） */
@media (min-width: 768px) {
  .lrcontainer {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  /* 第1、3、5...对的图片：放在第2列 */
  .lrcontainer .content-img:nth-child(4n-2) {
    grid-column: 2;
  }

  /* 第2、4、6...对的文本：放在第2列 */
  .lrcontainer .content-text:nth-child(4n-1) {
    grid-column: 2;
  }

  /* 第2、4、6...对的图片：放在第1列 */
  .lrcontainer .content-img:nth-child(4n) {
    grid-column: 1;
  }
}

如果不想依赖类名，也可以直接通过元素位置匹配（只要HTML严格遵循文本→图片的顺序）：

@media (min-width: 768px) {
  .lrcontainer {
    grid-template-columns: 1fr 1fr;
  }

  .lrcontainer > *:nth-child(4n-2) {
    grid-column: 2;
  }

  .lrcontainer > *:nth-child(4n-1) {
    grid-column: 2;
  }

  .lrcontainer > *:nth-child(4n) {
    grid-column: 1;
  }
}

核心原理 #

1. 移动端：直接使用单列Grid，元素按HTML原生顺序排列，自然满足文本在前、图片在后的需求，无需额外调整。
2. 桌面端：通过nth-child选择器按「4个元素为一组」的规律定位每对图文：
   • 第1组（Text1+Img1）：Text1默认在第1列，Img1被指定到第2列 → 形成|Text1|Img1|
   • 第2组（Text2+Img2）：Text2被指定到第2列，Img2被指定到第1列 → 形成|Img2|Text2|
   • 后续组以此类推，自动重复交替布局

为什么之前用order没生效？ #

order属性仅控制同一Grid轨道内的排列顺序，而桌面端是两列布局，直接通过grid-column指定元素所在列，比调整order更直接可靠，不会出现轨道冲突的问题。

内容的提问来源于stack exchange，提问作者leisurelarry