html - CSS网格: Position grid items in specific column

Question

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

我使用 display: grid 来实现第一列(两列中的第一列)包含 li 的 7 的布局> 元素。

我尝试遵循approach here ，通过使用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>