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;
}
正常的效果
html的flex布局1234
5678
低版本安卓机上的效果
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;
}

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