如何指定CSS Grid布局顺序 实现桌面端按列填充移动端顺序正常

仅靠grid-auto-flow无法直接实现这个分组填充需求，因为该属性只能控制整体网格是按行/按列流动，无法实现"前两列为一组先填充、后两列为一组后填充"的分组逻辑，下面提供两种可落地的方案，可根据是否允许调整DOM结构选择。

方案1：新增条目包裹层（推荐，适配任意数量动态内容） #

这个方案代码最简洁，无需复杂选择器，适配任意数量的列表项，只需要在现有DOM基础上，把每两个相邻的grid-item（序号块+对应内容块）用一个条目容器包裹，不改动原有grid-item的先后顺序，不会影响移动端布局。

修改后的HTML结构 #

<section class="grid">
  <div class="grid-entry">
    <div class="grid-item">1</div>
    <div class="grid-item">Item 1</div>
  </div>
  <div class="grid-entry">
    <div class="grid-item">2</div>
    <div class="grid-item">Item 2</div>
  </div>
  <div class="grid-entry">
    <div class="grid-item">3</div>
    <div class="grid-item">Item 3</div>
  </div>
  <div class="grid-entry">
    <div class="grid-item">4</div>
    <div class="grid-item">Item 4</div>
  </div>
</section>

完整CSS代码 #

.grid {
  display: grid;
  column-gap: 12px;
  align-items: center;
  justify-content: center;
  background-color: orange;
  border: 1px solid black;
  /* 移动端默认1列 */
  grid-template-columns: 1fr;
}

/* 每个条目内部固定为48px + 自适应两列 */
.grid-entry {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 12px;
}

.grid-item {
  padding: 16px;
  border: 1px solid black;
  font-size: 12px;
  background-color: aliceblue;
}

/* 桌面端断点，根据实际需求调整宽度 */
@media (min-width: 768px) {
  .grid {
    /* 外层两列等宽 */
    grid-template-columns: 1fr 1fr;
    /* 核心：改为按列流动，先填完左列再填右列 */
    grid-auto-flow: column;
  }
}

实现效果 #

• 移动端：外层1列，每个条目内部两列，完全符合原有需求的排列顺序
• 桌面端：外层2列按列填充，左列先排完前半部分条目，右列排后半部分条目，自动得到目标排列效果：

[1] [ Item 1 ] [3] [ Item 3 ]  
[2] [ Item 2 ] [4] [ Item 4 ]

方案2：不修改DOM结构，通过nth-child控制位置 #

如果完全不能调整现有DOM结构，保持所有grid-item平级，可以通过CSS子元素选择器批量指定不同位置item的列归属，浏览器会自动将对应item放到目标列的最早空行实现需求，适配任意数量的列表项。

完整CSS代码 #

原有HTML结构完全不用改动，只需要在桌面端媒体查询中追加列定位规则即可：

.grid {
  display: grid;
  column-gap: 12px;
  align-items: center;
  justify-content: center;
  background-color: orange;
  border: 1px solid black;
  /* 移动端默认2列 */
  grid-template-columns: 48px 1fr;
}

.grid-item {
  padding: 16px;
  border: 1px solid black;
  font-size: 12px;
  background-color: aliceblue;
}

/* 桌面端断点 */
@media (min-width: 768px) {
  .grid {
    /* 桌面端4列 */
    grid-template-columns: 48px 1fr 48px 1fr;
  }
  /* 左列组序号项：每8个元素的第1、3个，固定在第1列 */
  .grid-item:nth-child(8n+1),
  .grid-item:nth-child(8n+3) {
    grid-column: 1;
  }
  /* 左列组内容项：每8个元素的第2、4个，固定在第2列 */
  .grid-item:nth-child(8n+2),
  .grid-item:nth-child(8n+4) {
    grid-column: 2;
  }
  /* 右列组序号项：每8个元素的第5、7个，固定在第3列 */
  .grid-item:nth-child(8n+5),
  .grid-item:nth-child(8n+7) {
    grid-column: 3;
  }
  /* 右列组内容项：每8个元素的第6、8个，固定在第4列 */
  .grid-item:nth-child(8n+6),
  .grid-item:nth-child(8n+8) {
    grid-column: 4;
  }
}

实现逻辑 #

每8个平级grid-item为一个布局周期，前4个归属左半侧两列，后4个归属右半侧两列，浏览器自动按行填充时，会把同列的item按顺序往下排列，刚好得到目标布局效果；移动端下这些规则不生效，保持原有正确的2列排列顺序。

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