flex布局justify-content：space-between导致的最后一排数量不够自动向两端排列问题

先说出现的问题                                                         解决之后的样子

       

 解决办法：（利用grid栅格布局）

html：

<div 
    class="grid" 
    :style="{ 'grid-template-columns': `repeat(${columns},1fr)` }"
>
      <div class="list" v-for="(item, index) in len" :key="index">列表{{index}}</div>
</div>

js部分：

data(){
	return {
		len : 14,
		columns: 4, // 这个就是你需要几列这里就填写几
	}
}

css部分

.grid{
    display: grid;
    grid-gap: 20px 10px; //行之间间距 列之间间距
    //grid-template-columns: repeat(3, 30%);
    justify-content: space-between;

    .list{
      border:1px solid #ff6600;
      padding: 5px;
    }
}

display：grid

​​​​​​​

  display: grid;
  grid-gap: 20px 10px; //列间距 行间距
  grid-template-columns: repeat(3, 30%);
  justify-content: space-between;
  // 这个竖着排序的效果主要代码
  grid-auto-flow: column;  
  grid-template-rows: repeat(3, 1fr);