使用css网格区域时是否可以将单元格自动放置在下一行？

Question

我正在为一个新项目使用 css 网格，但遇到了一个“问题”。我已经阅读了文档，但也许我遗漏了一些东西。

现状

我创建了一个包含两列的 CSS 网格。左栏是“主”栏，右栏是“侧”栏。如果我将 div 一个接一个地交替放置，每个单元格将自动放置到下一行。这工作正常：

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 10px;
}

.grid__cell {
  height: 50px;
}

.main {
  background: blue;
}

.side {
  background: red;
}

<div class="grid">
  <div class="grid__cell main">
    main
  </div>
  <div class="grid__cell side">
    side
  </div>
  <div class="grid__cell main">
    main
  </div>
  <div class="grid__cell side">
    side
  </div>
  <div class="grid__cell main">
    main
  </div>
  <div class="grid__cell side">
    side
  </div>
  <div class="grid__cell main">
    main
  </div>
  <div class="grid__cell side">
    side
  </div>
</div>

目标

现在我想为两列创建模板区域。这样更容易将某个单元格放在右列中，并且 html 中 div 的顺序不再重要。问题是当我使用模板区域时，所有单元格都将从第一行开始：

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 10px;
  
  grid-template-areas: "main side";
}

.grid__cell {
  height: 50px;
}

.main {
  grid-area: main;
  
  background: blue;
}

.side {
  grid-area: side;
  
  background: red;
}

<div class="grid">
  <div class="grid__cell main">
    main
  </div>
  <div class="grid__cell side">
    side
  </div>
  <div class="grid__cell main">
    main
  </div>
  <div class="grid__cell side">
    side
  </div>
  <div class="grid__cell main">
    main
  </div>
  <div class="grid__cell side">
    side
  </div>
  <div class="grid__cell main">
    main
  </div>
  <div class="grid__cell side">
    side
  </div>
</div>

我知道我可以使用grid-row 将单元格放置到特定行，但这不是理想的情况。如果单元格将自动放置到右列的下一行，那就太好了。我错过了什么还是不可能？

Answer 1

不要为此使用grid-area，请使用grid-column 进行自动流放置。 如果碰巧看到一些漏洞，请查看https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow (keyword:dense)

.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 10px;
}

.grid__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  min-height: 50px;
}

.main {
  grid-column: 1;
  background: blue;
}

.side {
  grid-column: 2;
  background: red;
}

<div class="grid">
  <div class="grid__cell main">
    main
  </div>
  <div class="grid__cell side">
    side
  </div>
  <div class="grid__cell main">
    main
  </div>
  <div class="grid__cell side">
    side
  </div>
  <div class="grid__cell main">
    main
  </div>
  <div class="grid__cell side">
    side
  </div>
  <div class="grid__cell main">
    main
  </div>
  <div class="grid__cell side">
    side
  </div>
</div>