css布局方式，实现四宫格，九宫格，16宫格等切换

1.借助absolute方位值，实现自适应的网格布局，用伪元素间隔

absolute+四个方位值撑开局面、float+宽度百分比实现横向排列。高度百分比实现自适应。
最外层的父元素使用absolute负责占位，给子元素们把空间拉开，或者固定宽高也行
效果图

ul{
    
    
      height: 100%;
      padding: 0;
      position:absolute;
      left:0;
      top:0px;
      right:0;
      bottom:0;
      li{
    
    
        float:left;
        height:33.3%;
        width:33.3%;
        position:relative;
        /*background-color: #FE6278;*/
        &::before{
    
    
          content:'';
          position:absolute;
          left:6px;
          right:6px;
          top:6px;
          bottom:6px;
          border-radius:6px;
          background-color: #666666;
        }
      }
    }

2.直接用grid网格布局

<ul :class="['box', 'box_9']" ref="container">
        <li :class="['item', i==selectedGridIndex?'item_active':'']"
          v-for="(item, i) in grids" >
        </li>
</ul>

.box{
    
    
      display: grid;
      box-sizing: border-box;
      height: 100%;
      padding: 0;
      .item{
    
    
        box-sizing: border-box;
        background-color: #666666;
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.21);
        cursor: pointer;
        position: relative;
        &_active{
    
    
          border: 1px solid #FE6278;
        }
      }
    }
    .box_1{
    
    
      grid-template-columns: repeat(1, 100%); //1列，占100%
      grid-template-rows: repeat(1, 100%); //1行，占100%
    }
    .box_4{
    
    
    //四宫格
      grid-template-columns: repeat(2, 50%); //2列，各占50%
      grid-template-rows: repeat(2, 50%);//2行，各占50%
    }
    .box_9{
    
    
    //9宫格
      grid-template-columns: repeat(3, 33.33%);//3列，各占33.33%
      grid-template-rows: repeat(3, 33.33%);//3行，各占33.33%
    }
    .box_16{
    
    
      grid-template-columns: repeat(4, 25%);//4列，各占25%
      grid-template-rows: repeat(4, 25%);//4行，各占25%
    }