grid 布局兼容性问题

低版本的安卓机上是不生效的

• 代码

.grid_4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    text-align: center;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}

• 正常的效果

1	2	3	4
5	6	7	8

• 低版本安卓机上的效果

1

2

……

• 解决方法：使用flex布局模拟出grid的效果

  • 代码

  .grid_4 {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
  }
  .grid_4 .manager_item {
      width: calc(calc(100% / 4) - 15px);
      margin: 0 15px 15px 0;
      text-align: center;
  }
  <!--这个是为了删除是4的倍数的右magin-->
  .grid_4 .manager_item:nth-of-type(4n){
       margin-right: 0;
  }