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;
  }