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