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

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

       

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

html：

      
列表{{index}}

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);