CSS Grid 平均分布自动换行

问题

flex 自动换行有点问题

列数不固定，但是子元素宽度高度是固定的，最后几个元素很难居左（期望内容整体平均分布）

解决

Html

<div class="list">
  <div class="item">e1</div>
  <div class="item">e1</div>
  <div class="item">e1</div>
  <div class="item">e1</div>
  <div class="item">e1</div>
  <div class="item">e1</div>
  <div class="item">e1</div>
  <div class="item">e1</div>
</div>

Scss

.list {
  margin:0 20px;
  display: grid;
  //第一个属性：行与行间隔，第二个属性列与列间隔
  grid-gap:20px 20px;
  //内容整体平均分布
  justify-content: space-between;
  //单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用 auto-fill 关键字表示自动填充
  // grid-template-columns: repeat(auto-fill, 115px);
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  .item {
    // width: 115px;
    height: 100px;
    display: grid;
    border: 1px solid red;
    justify-content: center;
    align-content: center;
    background-color: rgba(242, 242, 242, 1);
    border: none;
    border-radius: 6px;
    box-shadow: none;
    font-size: 16px;
    color: #AAAAAA;
  }
}