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

最新推荐文章于 2025-03-17 02:05:11 发布

雨季～～

最新推荐文章于 2025-03-17 02:05:11 发布

阅读量3.8k

点赞数 1

文章标签： grid 自适应高度 flex

本文链接：https://blog.youkuaiyun.com/Terenceno/article/details/89947408

版权

博客围绕左右两列内容自适应文字高度展开。原本使用flex布局处理固定文字长度数据没问题，但数据变为动态后，同一行高度易错位。旨在实现左右两列自适应文字高度且同一行高一致的效果，并给出启蒙博客链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要求

左右两列内容都是动态的，要求自适应文字高度，同一行其行高一致；
原来数据是死的，用 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.youkuaiyun.com/beijiyang999/article/details/80868095