解决flex布局 设置justify-content: space-between后最后一排左对齐(不确定接口返回个数)，grid网格布局

  传统的页面布局，基于盒子模型margin + border + padding + content，依赖 display + position + float，它对于那些特殊布局非常不方便。现阶段比较流行的flex布局是主流，很好的解决了多数布局问题。但他也不是万能的，例如今天要与大家分享的justify-content: space-between的布局问题，废话不说，看示例：

当前我拥有如下代码：
css:

.flex-grid {
  padding: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.peixunClass {
  height: 225px;
  min-height: 171px;
  width: 282px;
  background: #f8f8f9;
  border: 1px solid #ebeef5;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 30px;
  overflow: auto;
}

html:

   <div class="flex-grid fontSet">
      <div
        v-for="(item, index) in trainList"
        :key="index"
        class="peixunClass"
      >
      trainList是接口返回的列表（不确定有多少个）
      </div>
    </div>

最终的展示样式为：

我是设置来了space-betwwen,但是显而易见，最后一行的样式不是我想要的，我想要的肯定是如下样式：
在这种情况下，flex布局好像就没有那么兼容了，这种情况下，我习惯用grid布局，也是推荐给大家。

Grid 布局即网格布局

Grid布局是一种二维布局方式，可以将页面分割成行和列，然后在这些行和列的交叉点上放置元素，从而实现对页面布局的精细控制。Grid布局可以让我们更加轻松地实现复杂的布局，比如多列、多行、嵌套布局等。同时，Grid布局还支持自适应和响应式设计，可以根据不同的屏幕尺寸和设备类型自动调整布局。

Grid布局的主要特点包括：

二维布局：Grid布局可以同时控制行和列，实现更加精细的布局。
自适应和响应式设计：Grid布局可以根据不同的屏幕尺寸和设备类型自动调整布局。
灵活性：Grid布局支持多种布局方式，比如自动填充、自动对齐、自动调整等。
可读性：Grid布局的代码结构清晰，易于理解和维护。
好，接下来我们给当前元素设置如下css：

.flex-grid {
  padding: 10px;
  display: grid;
  grid-gap: 0 1px;
  grid-template-columns: repeat(auto-fill, 282px);定义网格的列模板。使用repeat()函数创建自动填充的列，每列的宽度为282像素。
  justify-content: space-between;设置网格中项目在主轴上的对齐方式为两端对齐，即项目在水平方向上均匀分布，两端留有空白。
}

注意这里的282px，是你的子元素每个的宽度。
好啦，接下来看结果：

很好，这不就达成了我们的目的了嘛。不知道有没有帮你解决问题，记得点赞收藏哦，亲。