网格布局 display: grid； 多行展示水平分布，最后一行平均分布，自适应布局随着页面的宽度变化而变化

使用网格布局 display: grid;

// 父级盒子
.serve-box {
  display: grid;
  /* 设置间距 */
  grid-gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

注意这样只有一行时回出现水平水平分布的问题，需要单独处理

// 判断只有一行展示时加上 active 来控制网格的每一列
.serve-box.active {
  grid-template-columns: 220px 220px 220px 220px 220px 220px;
}
···