用 grid 布局轻松解决左右两列内容都是动态的，要求自适应文字高度

要求

• 左右两列内容都是动态的，要求自适应文字高度，同一行其行高一致；
  原来数据是死的，用 flex 布局，左右分别两个 div，由于文字长度固定，不会有问题。
  后来数据是动态的，可能造成同一行高度错位的问题。

• 实现效果
  

• 直接上代码

<template>
    <div class="g-body">
      <div class="key" v-for="(key,i) in list">{{ key.name }}</div>
      <div class="value" v-for="(item,i) in list">
        <p v-for="(aa,y) in item.data">{{ aa.name }}</p>
      </div>
    </div>
</template>

<script>
    export default {
        name: "gridDemo",
      data(){
          return {
            list:[
              {
                name:'AAA',
                data:[
                  {name:'a1'},
                  {name:'a1'},
                  {name:'a1'},
                ]
              },
              {
                name:'BBB',
                data:[
                  {name:'b1'},
                  {name:'b2'},
                  {name:'b2'},
                  {name:'b2'},
                  {name:'b2'},
                  {name:'b2'},
                ]
              }
            ]
          }
      }
    }
</script>

<style scoped>
.g-body{
  width: 100%;
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  grid-template-rows: auto;
  font-size: 0.3rem;
  box-sizing: border-box;
  grid-auto-flow: dense;
  /*
  空网格的填充方式
  问题出在了 grid 对空网格的填充规则上。
  用于设置父元素的 grid-auto-flow 的默认值是 row。即依次填充每行。
  结合上面提到的，两个数组分别得到的数据，不难理解为什么会出现这样的情况。
  该属性还有：
  column 依次填充每列
  dense 尝试在网格中填充空洞 //父级设置该属性，那么子级就应该设置填充的开始和结束基线grid-column-start: 2;grid-column-end: 3;
  */
}
.g-body>div{
  border: 1px solid #333;
  margin-right: 10px;
  margin-bottom: 10px;
}
/* key 占第一列 */
.key {
  grid-column-start: 1;
  grid-column-end: 2;
  justify-content: end;
}
/* value 占第二列 */
.value {
  grid-column-start: 2;
  grid-column-end: 3;
  word-break: break-word;
}
</style>

启蒙博客：https://blog.csdn.net/beijiyang999/article/details/80868095