CSS Grid项目未并排排列：实现两列垂直分布列表的问题

你的问题在于当前Grid布局中，列表项按文档流顺序依次占据单独行，前5个元素占满左侧列的前5行，后续元素只能从第6行的右侧列开始排列，无法和左侧元素并排。以下是两种可行的修正方案：

方案一：明确指定元素的行列位置（适合固定数量的项） #

修改你的SCSS代码如下：

.no-list-grid {
  counter-reset: nolist;
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(2, 1fr); /* 简化为2列布局 */
}

.no-list-item {
  padding: 30px;
  background: #eeee;

  /* 左侧列：第1-5项 */
  &:nth-child(1),
  &:nth-child(2),
  &:nth-child(3),
  &:nth-child(4),
  &:nth-child(5) {
    grid-column: 1;
  }

  /* 右侧列：第6-10项，对应左侧的行位置 */
  &:nth-child(6) { grid-column: 2; grid-row: 1; }
  &:nth-child(7) { grid-column: 2; grid-row: 2; }
  &:nth-child(8) { grid-column: 2; grid-row: 3; }
  &:nth-child(9) { grid-column: 2; grid-row: 4; }
  &:nth-child(10) { grid-column: 2; grid-row: 5; }

  /* 第11项：跨两列显示 */
  &:nth-child(11) { grid-column: 1 / -1; }
}

这种方式直接为右侧元素绑定对应左侧的行号，确保左右项垂直对齐，逻辑清晰，适合固定数量的列表项场景。

方案二：利用CSS变量+Grid计算（更易维护） #

如果后续可能调整列表项数量，可通过CSS变量简化行号绑定：

.no-list-grid {
  counter-reset: nolist;
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(2, 1fr);
}

.no-list-item {
  padding: 30px;
  background: #eeee;

  /* 左侧列：第1-5项 */
  &:nth-child(-n+5) {
    grid-column: 1;
    grid-row: var(--row);
  }

  /* 右侧列：第6-10项，通过变量计算对应行 */
  &:nth-child(n+6):nth-child(-n+10) {
    grid-column: 2;
    grid-row: var(--row);
  }

  &:nth-child(11) {
    grid-column: 1 / -1;
  }
}

对应的HTML中给列表项添加自定义属性：

<div class="no-list-item" style="--row:1">Item 1</div>
<div class="no-list-item" style="--row:2">Item 2</div>
<!-- ... 依次给第3-5项设置--row:3到5 -->
<div class="no-list-item" style="--row:1">Item 6</div>
<div class="no-list-item" style="--row:2">Item 7</div>
<!-- ... 依次给第8-10项设置--row:3到5 -->
<div class="no-list-item">Item 11</div>

效果说明 #

两种方案都能实现：左侧垂直堆叠第1-5项，右侧垂直堆叠第6-10项，左右两列并排对齐，第11项可跨列显示在底部。

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