我正在处理一组元素并尝试使用 css 网格来定位它们。我的问题是我将它们与第 n 个 child 放在一起,因此在前 6 个 child 之后它就会中断。我希望能够拥有无限数量的元素,并且它们都会正确放置。基本上布局应该在前 6 个元素之后重复。
.wrapper {
display: grid;
grid-template-columns: calc(50% - 4px) calc(50% - 4px);
grid-template-rows: 120px 120px 120px 240px;
gap: 8px;
margin-left: 0;
margin-right: 0;
}
.item {
background: #bada55;
}
.item:nth-child(1) {
grid-row-start: 1;
grid-row-end: 3;
}
.item:nth-child(2) {
grid-row-start: 1;
grid-row-end: 2;
}
.item:nth-child(3) {
grid-row-start: 2;
grid-row-end: 3;
}
.item:nth-child(4) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
<div class="wrapper">
<a class="item">
Item
</a>
<a class="item">
Item
</a>
<a class="item">
Item
</a>
<a class="item">
Item
</a>
<a class="item">
Item
</a>
<a class="item">
Item
</a>
<a class="item">
Item
</a>
<a class="item">
Item
</a>
<a class="item">
Item
</a>
</div>
最佳答案
就像下面这样:
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr; /* fr instead of % */
grid-auto-rows: 120px 120px 120px 240px; /* auto-rows instead of template-rows */
grid-auto-flow: dense; /* fill all the space */
gap: 8px;
}
.item {
background: #bada55;
}
.item:nth-child(6n + 1) {
grid-row: span 2; /* I will take 2 rows */
}
.item:nth-child(6n + 4) {
grid-column: 1/-1; /* I will take all the columns */
}
<div class="wrapper">
<a class="item">
Item
</a>
<a class="item">
Item
</a>
<a class="item">
Item
</a>
<a class="item">
Item
</a>
<a class="item">
Item
</a>
<a class="item">
Item
</a>
<a class="item">
Item
</a>
<a class="item">
Item
</a>
<a class="item">
Item
</a>
</div>
关于css - 使用未知数量的元素重复网格布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63807091/