css - 如何使用 grid/flex 在 CSS 中创建具有不同大小行的 UI？

Question

我需要在图中创建一个 UI，它将根据传递给其元素的类(2 个 View )更改其布局。

第一个布局看起来像两列，在第一列中 2 个 div(a 和 b)一个在另一个没有间隙的顶部，第二列中的第三个 div (c) 与顶部对齐。

第二个布局 - 所有 3 个 div 都在一列中，但第二列(c)中的 div 进入它们之间(a 和 b)

我尝试对第一个布局( grid-template-columns: auto auto )使用网格 css 和 2 列将其变成第二个 View ( grid-template-columns: auto )中的一列，但问题是 C 块比 A 长，因此网格行根据到最长的 div，所以 A 和 B 之间有很大的差距。最好使用 flex 或 grid 的任何想法？

.a {
  width: 50px;
  height:30px;
  background: pink;
}

.b {
  width: 50px;
  height:80px;
  background: green;
}

.c {
  width: 50px;
  height:80px;
  background: red;
}

.cont {
  display: grid;
  grid-template-columns: auto auto;
  width: 120px;
}

<div class="cont">

<div class="a">A
</div>

<div class="c">C
</div>

<div class="b">B
</div>

</div>

Answer 1

问题是你只处理两行。自动调整大小的行将采用最高元素的高度。这将在较短的元素和行的底部之间产生间隙。
采取不同的方法:

将行分解为每个网格项的公倍数(即 10px)。

有每一项span跨行以达到它们的高度。

.cont {
  display: grid;
  grid-template-columns: 50px 50px;
  grid-auto-rows: 10px;
  grid-gap: 10px;
  width: 120px;
}

.a {
  grid-row: 1 / span 3;
  grid-column: 1;
  background: pink;
}

.b {
  grid-row: 4 / span 8;
  grid-column: 1;
  background: green;
}

.c {
  grid-row: 1 / span 8;
  grid-column: 2;
  background: red;
}

<div class="cont">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>