产品列表与网格布局和其他元素之间

Question

我想创建一个具有网格布局的产品列表，可以在列表之间显示另一个元素。列表中的产品通过for循环动态添加到商店cms中，因此在html中，我必须将其他元素放在forloop之前或之后。我尝试了产品的自动放置，但其他元素显示在列表的末尾。我怎样才能实现显示"其他"元素填充第三和第四个网格列。

#wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
#grid-table {
display: grid;
width: 90%;
grid-template-columns: repeat(4, 1fr);
list-style: none;
gap: 15px;
}
.red-box {
width: 100px;
height: 100px;
background-color: red;
}
.green-box {
width: 100px;
height: 100px;
background-color: green;
}

<div id="wrapper">
<ul id="grid-table">
<!--- dynamically added through for loop -->
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<!--- for loop ends -->
<li class="green-box"></li>
</ul>
</div>

Answer 1

你可以通过这种方式达到预期的结果，但是我们需要改变.green-box的固定宽度，因为它应该从第3列跨越到第4列。

#wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
#grid-table {
display: grid;
width: 90%;
grid-template-columns: repeat(4, 1fr);
list-style: none;
gap: 15px;
}
.red-box {
min-width: 100px;
height: 100px;
background-color: red;
}
.green-box {
min-width: 100px;
height: 100px;
background-color: green;
grid-row: 2;
grid-column: 3 / span 2;
}

<div id="wrapper">
<ul id="grid-table">
<!--- dynamically added through for loop -->
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<li class="red-box"></li>
<!--- for loop ends -->
<li class="green-box"></li>
</ul>
</div>