SOURCE

<section>
  <div class="flex-container-parent">
    <div class="flex-container">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</section>
<hr>
<section>
  <div class="grid-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</section>

.box {
  border-radius: 4px;
  height: 50px;
  width: 50px;
  background: #99a9bf;
}
.flex-container-parent{
  display: flex;
  justify-content: center;
}
.flex-container {
  display: flex;
  flex-wrap: wrap;
  background: #d3dce6;
}

.grid-container {
  justify-content: center;
  display: grid;
  background: #d3dce6;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  /*无法自动计算列数*/
  grid-template-columns: repeat(8, auto);
}