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

【问题标题】：How to create UI with different size rows in CSS with grid/flex?如何使用 grid/flex 在 CSS 中创建具有不同大小行的 UI？
【发布时间】：2021-08-14 01:40:00
【问题描述】：

我需要创建一个如图所示的 UI，它将根据传递给其元素的类（2 个视图）更改其布局。

第一个布局看起来像两列，第一列中有 2 个 div（a 和 b），一个在顶部另一个没有间隙，第二列中的第三个 div (c) 与顶部对齐。
第二个布局 - 所有 3 个 div 都在一个列中，但来自第二列 (c) 的 div 进入它们之间（a 和 b）

我尝试在第一个布局 (grid-template-columns: auto auto) 中使用网格 css 和 2 列将其转换为第二个视图 (grid-template-columns: auto) 中的一列，但问题是 C 块比 A 长，因此网格row 根据最长的 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>

【问题讨论】：

标签： css flexbox css-grid

【解决方案1】：

问题是您只处理两行。自动调整大小的行将采用最高项目的高度。这将在较短的项目和行的底部之间产生间隙。

采取不同的方法：

将行分解为每个网格项的公倍数（即 10 像素）。
让每个项目 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>

【讨论】：