如何解决具有扩展项目的不规则网格
我有一个网格,其中每个奇数行包含与偶数行不同数量的项目。诸如4/3/4/3之类的东西...
我已经设法用下面的代码做到了:
.grid-layout {
display: grid;
grid-template-columns: repeat(12,1fr);
grid-template-rows: repeat(5,1fr);
grid-auto-rows: 0;
grid-column-gap: 20px;
grid-row-gap: 40px;
}
.grid-item {
grid-column: span 3;
}
.grid-item:nth-child(7n),.grid-item:nth-child(7n-1),.grid-item:nth-child(7n-2) {
grid-column: span 4;
}
这可以正常工作并创建了不规则的网格,但是当我尝试更进一步时,我的问题就开始了: 我在后端面板中添加了一个字段,您可以在其中选择网格项是否展开并占用两个项目的空间:
.grid-item.expanded {
grid-column: span 6;
}
请确保网格混乱,因为我是通过调用其“第n个子项”来生成该组合的;因此,在扩展项目时,CSS会继续使用相同的条件,并且网格也会发生变化。
有什么办法可以做到这一点? 通过定位每一行而不使用'nth-child'计数来生成布局非常有用。
我希望它足够清楚。 预先感谢!
解决方法
如果您愿意使用flexbox。
body * {
border: 1px solid;
}
[ctr] {
display: flex;
flex-wrap: wrap;
}
[ctr]>div {
margin: 5px;
flex: 1 0 calc(100% / 4);
height: 100px;
}
[ctr]>div:nth-last-child(7n),[ctr]>div:nth-last-child(7n-1),[ctr]>div:nth-last-child(7n-2) {
flex: 1 0 calc(100% / 3);
}
/* Expanded */
[ctr]>div:nth-child(6) {
flex: 1 0 calc(100% / 1.5);
}
[ctr]>div:nth-child(9) {
flex: 1 0 calc(100% / 1.5);
}
<div ctr>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。