问题

最近一个需求如图：

大概是

左右两列内容都是动态的，要求自适应文字高度，同一行其行高一致；

左列文字右对齐，右列文字左对齐；

原来数据是死的，用 flex 布局，左右分别两个 div，由于文字长度固定，不会有问题。
后来数据是动态的，可能造成同一行高度错位的问题。

在不改动数据结构的前提下，尝试用 grid 解决，发现异常轻松。

GRID 轻松解决

grid 布局和 flex 布局挺像，也是 容器 + item 的结构。

对父元素设置

.daddy {display: grid;
 }

就生效了

根据上面的图，我们想要一个两列的网格。这个需求可以通过 grid-template 网格模板轻松设置。

行

.daddy {display: grid;grid-template-columns: 60px 180pxgrid-template-rows: auto;
 }

至此，我们得到了一个网格结构。

不过是有问题的，文字内容没有按照预想的顺序排列：

原因在于，我们的数据是类似这样的：

... ...// 通过 Array_1 渲染出
 {
aaa
bbb
ccc
ddd
 }
 // 通过 Array_2 渲染出
 {
AAA
BBB
CCC
DDD
 }... ...

grid 会自动按顺序一行行往下填充网格空格。

我们需要设置 key 是第一列，value 是第二列。

子元素的设置

grid 布局允许我们指定子元素出现在哪一列。

我们希望：key 是第一列。即，key 的范围在下图（从左到右）第一条竖红线 与 第二条竖红线 之间。

用代码表示
grid-column-start: 1; 即 纵向，从第一条红线开始；
grid-column-end: 2; 纵向，到第二条红线结束；

即

// key 占第一列
 .key {grid-column-start: 1;grid-column-end: 2;
 }
 // value 占第二列
 .value {grid-column-start: 2;grid-column-end: 3;
 }

于是，我们得到了一个新的网格：

key 的确在第一列， value 的确在第二列 … …

空网格的填充方式

问题出在了 grid 对空网格的填充规则上。

用于设置父元素的 grid-auto-flow 的默认值是 row。即依次填充每行。
结合上面提到的，两个数组分别得到的数据，不难理解为什么会出现这样的情况。

该属性还有

我们对父元素设置

.daddy {... ...grid-auto-flow: dense;
 }

成功~

最后，我们对第一列规定右对齐

.key {... ...justify-content: end;
 }

完美~

最后代码

.daddy {display: grid;grid-template-columns: 60px 180px;grid-template-rows: auto;grid-auto-flow: dense;.key {grid-column-start: 1;grid-column-end: 2;justify-content: end;}.value {grid-column-start: 2;grid-column-end: 3;word-wrap: wrap;word-break: break-word;}}

grid 真的十分方便！