css布局⽅式，实现四宫格，九宫格，16宫格等切换1.借助absolute⽅位值，实现⾃适应的⽹格布局，⽤伪元素间隔
absolute+四个⽅位值撑开局⾯、float+宽度百分⽐实现横向排列。⾼度百分⽐实现⾃适应。
最外层的⽗元素使⽤absolute负责占位，给⼦元素们把空间拉开，或者固定宽⾼也⾏
效果图
ul{
height: 100%;
padding: 0;
position:absolute;
left:0;
top:0px;
box sizingright: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%
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。