网格列没有行？

Question

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

这是我理想的布局：

问题：

1）如果我告诉元素A和B使用第1行，则它们的第1列彼此堆叠，而不是堆叠在A之下。

2）如果我指定元素B使用第二行，则由于元素C使行1高而被推到元素C下方。

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

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

我知道的唯一解决方案是在像这样的列内创建“脚手架” 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）是否可以将两个元素放在同一行上，并使其一个出现在另一个下面而不发生冲突？

这是我的两支笔，试图在有和没有脚手架的情况下找到解决方案：

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>