grid布局的使用

HTML：

<div class="gridparents">
      <div class="gridlistsson" v-for="(item,index) in infolist" :key="index">
        <span>{{ item.id }}.{{ item.value }}</span>
      </div>
</div>

data:

infolist: [
        { id: 1, value: '广汽传祺GS4口碑' },
        { id: 2, value: '广汽传祺GS4口碑' },
        { id: 3, value: '领克03油耗' },
        { id: 4, value: '本田思域油耗' },
        { id: 5, value: '奔驰A级车卖点' },
        { id: 6, value: '广汽传祺GS4口碑' },
        { id: 7, value: '广汽传祺M6口碑' },
        { id: 8, value: '领克03油耗' },
        { id: 9, value: '本田思域油耗' },
        { id: 10, value: '奔驰A级车卖点' },
      ],

CSS: 

.gridparents {
  border: 1px solid red;
  height: 300px;
  width: 300px;
  display: grid; // grid 网格布局
  grid-template-columns: repeat(2,50%); // 2列 每列占比 50%；
  grid-template-rows: repeat(5,20%);  // 5行 每行占比20%；
  grid-auto-flow: column dense; // 先填满第一列，再去填第二列
}
.gridlistsson {
  border: 1px solid green;
  display: flex;
  align-items: center;
  justify-content: center;
}

效果：