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