时间戳

首页 > 解决方案 > 如何使用 grid/flex 在 CSS 中创建具有不同大小行的 UI？

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

问题描述

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

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

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

我尝试在第一个布局（grid-template-columns: auto auto）中使用网格 css 和 2 列将其转换为第二个视图（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>

标签： cssflexboxcss-grid

解决方案

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

采取不同的方法：

  • 将行分解为每个网格项的公倍数（即 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>

推荐阅读