CSS 网格：将网格项放置在特定列中

Question

我有一个ul总共包含11项目的项目。

我使用它是display: grid为了实现第一列（两列中的第一列）包含元素7的布局li。

我尝试通过使用遵循此处的方法grid-template-areas，但我的left li方法似乎彼此重叠。

简而言之，我希望第一列（左）包含7项目，第二列（右）包含4.

演示：

.grid {
  display: grid;
  grid-template-areas: "left right";
  grid-template-columns: repeat(2, 1fr);
  min-width: 375px;
  padding: 10px 0;
  list-style-type: none;
}
.grid__item:nth-child(-n+7) {
  grid-area: left;
}

<ul class="grid">
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
</ul>

Answer 1

你可以像下面这样做：

.grid {
  display: grid;
  grid-auto-flow:dense; /* this */
  min-width: 375px;
  padding: 10px 0;
  list-style-type: none;
}
.grid__item {
  grid-column:2; /* and this */
}

.grid__item:nth-child(-n+7) {
  grid-column:1; /* and this */
}

<ul class="grid">
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Left</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
  <li class="grid__item">Right</li>
</ul>