Question

我想创建一个重复的项目循环，以特定的布局显示。我正在使用css网格和跨越行和列的效果。我无法控制项目的呈现，需要帮助和指导！

我尝试指定列的高度而不是使用跨度，但是随后它在网格项之间创建了可见的空白空间（因为该行占据了最大网格项的高度）。使用translate（），我可以单独移动网格项目，但很快就会变得混乱，感觉也不对。

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
}

.grid-item {
    min-height: 5rem;
    text-align: center;
    border: 1px solid black;
}

.grid-item:nth-child(5n+1),
.grid-item:nth-child(5n+4) {
    background-color: bisque;
    grid-area: auto / auto / span 4 / span 2;
}

.grid-item:nth-child(5n+2),
.grid-item:nth-child(5n+3) {
    background-color: darkgreen;
    grid-area: auto / auto / span 2 / span 2;
}

.grid-item:nth-child(5n) {
    background-color: coral;
    grid-column: span 4;
}

<div class="grid">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
    <div class="grid-item">11</div>
    <div class="grid-item">12</div>
    <div class="grid-item">13</div>
    <div class="grid-item">14</div>
    <div class="grid-item">15</div>
</div>

我希望输出可重复，例如：

-------- -------
|   1   |   2   |
|       |-------|
|-------|   4   |
|   3   |       |
-------- --------
|       5       |
-----------------

现在，第3个项目堆叠在2个下方，而不是1个以下。总的来说，第1个和第4个项目应跨越2行，而所有4个项目应在第5个项目的顶部形成正方形。 >

跨行和跨列时控制CSS网格项。强制项目在新行上

0 个答案: