0

I want to create a repeated loop of items that displays in a particular layout. I'm using css grid and span-ing rows and columns for the effect. I'm not able to control the rendering of items, need help and guidance !

I have tried specifying height of the columns instead of using span, but then it creates visible empty spaces between the grid-item(as the row takes the height of the biggest grid-item). Using translate() I can move the grid-items individually, but it gets messy soon and doesn't feel right too.

.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>

I want the output to be repeatable like:

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

Right now '3'rd item gets stacked below 2, instead of 1. Overall, 1st and 4th items should span across 2 rows and all 4 items together should form like a square shape on top of the fifth item.

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Suneel Yadav
  • 13
  • 4
  • You can't do that with CSS-Grid because **it's not a grid**. – Paulie_D Jul 03 '19 at 09:39
  • @Paulie_D Can you clarify what's not a grid in OP's description? Do you mean the repeating loop part or the desired layout OP provided? – TylerH Jul 03 '19 at 13:39
  • If there aren't rows which span the entire parent, it's not a grid. The line between 1/3 and 2/4 would have to line up...and they don't. Hence it's not a grid. The height of the individual elements is dynamic so you can't set a row height either. – Paulie_D Jul 03 '19 at 13:56

0 Answers0