CSS Grid：在特定列中定位网格项答案

【问题标题】：CSS Grid: Position grid items in specific columnCSS Grid：在特定列中定位网格项
【发布时间】：2022-01-29 06:43:52
【问题描述】：

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

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

我尝试使用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>

【问题讨论】：

标签： html css css-grid

【解决方案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>

【讨论】：

我喜欢这种方法
谢谢！出于好奇，为什么grid-template-areas 方法不起作用？
@Freddy template-areas 用于每个项目的特定区域（行和列）。这里只需要定义列，让行自动保留