"grid"布局完美解决!!!
布局是这样的,第一个固定的,其他动态渲染出来。
固定不动
其他1
其他2
其他3
其他4
其他5
其他6
其他7
然后就是样式,"grid"布局,一行两列,固定不动的占据两行一列。其他的自动排列。
.box {
display: grid;
grid-template-columns: repeat(2, 1fr);
border: 1px solid #eee;
gap: 10px;
padding: 5px;
}
.box .box-item {
border: 1px solid #eee;
}
.box .box-item:first-child {
grid-row-start: 1;
grid-row-end: 3;
}
效果是这样的,
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20241119/220321d48bc8d2ca2153d6ae9ceec5a7.png)