没有行的网格列？

Question

我正在尝试使用 CSS Grid 规范创建一个 3 列布局，但我遇到了行和元素大小的问题。我的列需要包含不同高度的未指定数量的内容。

这是我理想的布局：

问题：

1）如果我告诉元素 A 和 B 使用第 1 行、第 1 列，那么它们会相互叠加，而不是 B 在 A 下方。

2)如果我指定元素 B 使用第二行，那么由于元素 C 使第 1 行变高，它会被推到元素 C 下方。

3)如果我指定元素 B 使用第二行，则元素 A 会拉伸以填充第 1 行。

有没有办法让元素表现得像第一张图片？

我所知道的唯一解决方案是在列内创建“脚手架”div，如下所示：

<div class="grid">
    <div class="col">
        <div class="itemA"></div>
        <div class="itemB"></div>
    </div>
    <div class="col">
        <div class="itemC"></div>
    </div>
    <div class="col">
        <div class="itemD"></div>
        <div class="itemE"></div>
        <div class="itemF"></div>
    </div>
</div>

但我不喜欢这样做，我认为网格规范应该允许在没有脚手架的情况下创建布局。

问题：

1）有什么办法可以防止元素拉伸以垂直填充行？

2)是否可以将两个元素放在同一行上，并让它们一个在另一个下面而不是冲突？

这是我的 2 支笔，我试图在其中找到有脚手架和没有脚手架的解决方案：

无脚手架

带脚手架

Answer 1

我能拥有的最接近的，但我确实建议你使用flexbox，你不能只在CSS网格中定义列，浏览器会为你定义行，如果你不这样做，并且你不管理它们，你会得到奇怪的布局。

我对元素之间的高度差异进行了硬编码。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.grid {
  background: brown;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 10px;
  padding: 10px;
}

.grid>div {
  background-color: orange;
}

.itemA {
  grid-column-start: 1;
  grid-row: 1 / 1;
  width: 100px;
  height: 100px;
}

.itemB {
  grid-column-start: 1;
  grid-row: 2 / 4;
  height: 200px;
}

.itemC {
  grid-column-start: 2;
  grid-row: 1 / 3;
  height: 200px;
}

.itemD {
  grid-column-start: 3;
  width: 100px;
  height: 100px;
}

.itemE {
  grid-column-start: 3;
  height: 100px;
}

.itemF {
  grid-column-start: 3;
  grid-row: 3 / 4;
  height: 200px;
}

<div class="grid">
  <div class="itemA">A</div>
  <div class="itemB">B</div>
  <div class="itemC">C</div>
  <div class="itemD">D</div>
  <div class="itemE">E</div>
  <div class="itemF">F</div>
</div>