CSS 网格：在特定列中定位网格项目

Question

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

我正在使用 display: grid 来实现第一列（两列中的）包含 li 元素中的 7 的布局。

我试图通过使用 grid-template-areas 来遵循 approach here，但是我的 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>

CSS 网格：在特定列中定位网格项目

CSS Grid: Position grid items in specific column

html

css

css-grid