如何调整两列CSS Grid布局中网格项的排列顺序

CSS 方案（最简洁） #

无需修改DOM结构，仅调整Grid布局属性即可实现需求：

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 定义两等宽列 */
  grid-template-rows: repeat(6, auto); /* 定义6行，刚好容纳第一列的6个项 */
  grid-auto-flow: column; /* 切换自动填充方向为列优先：先填满第一列所有行，再填充第二列 */
}

原理：grid-auto-flow: column 会让网格项优先沿列方向排列，第一列的6行被填满后，剩余5个项会自动流入第二列，完美匹配1-6在第一列、7-11在第二列的布局。

CSS 方案（手动定位，适合保留原grid-auto-flow: row的场景） #

如果不想修改grid-auto-flow的默认值，可以通过:nth-child选择器手动指定每个项的位置：

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: row; /* 保留原有的row设置 */
}

/* 第一列的1-6号项 */
.grid-item:nth-child(1) { grid-column: 1; grid-row: 1; }
.grid-item:nth-child(2) { grid-column: 1; grid-row: 2; }
.grid-item:nth-child(3) { grid-column: 1; grid-row: 3; }
.grid-item:nth-child(4) { grid-column: 1; grid-row: 4; }
.grid-item:nth-child(5) { grid-column: 1; grid-row: 5; }
.grid-item:nth-child(6) { grid-column: 1; grid-row: 6; }

/* 第二列的7-11号项 */
.grid-item:nth-child(7) { grid-column: 2; grid-row: 1; }
.grid-item:nth-child(8) { grid-column: 2; grid-row: 2; }
.grid-item:nth-child(9) { grid-column: 2; grid-row: 3; }
.grid-item:nth-child(10) { grid-column: 2; grid-row: 4; }
.grid-item:nth-child(11) { grid-column: 2; grid-row: 5; }

JavaScript 方案（动态适配场景） #

如果需要根据项的数量动态调整布局，可以用JS给每个网格项设置行和列的位置：

const gridItems = document.querySelectorAll('.grid-item');

gridItems.forEach((item, idx) => {
  if (idx < 6) {
    // 前6个项放在第一列，行号为索引+1
    item.style.gridColumn = '1';
    item.style.gridRow = idx + 1;
  } else {
    // 后5个项放在第二列，行号为索引-5（从1开始）
    item.style.gridColumn = '2';
    item.style.gridRow = idx - 5;
  }
});

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