css - 没有行的网格列？

Question

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

这是我理想的布局:

问题:

1) 如果我告诉元素 A 和 B 使用第 1 行、第 1 列，那么它们会堆叠在彼此之上，而不是 B 在 A 下面。

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

3) 如果我指定元素 B 使用第二行，则元素 A 会拉伸(stretch)以填充第 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) 有什么方法可以防止元素拉伸(stretch)以垂直填充行？

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>