没有行的网格列？

Question

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

这是我理想的布局：

问题：

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

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 支钢笔，我正在尝试寻找有无脚手架的解决方案：

Without scaffolding

With scaffolding

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>