CSS grid pattern issue

Question

Trying to achieve duplicate patterns like the image below using css grid:

Tried using CSS grid, see code handle

.parent {
  display: grid;
  grid-gap: 20px;
  direction: rtl;
  padding-bottom: 20px;
}

.item--img-cont img {
  width: 100%;
}

.item--text-cont {
  color: white;
}

.item {
  background: black;
}


/*START:Desktop Style */

@media screen and (min-width:1280px) {
  .parent {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .item:nth-child(10n+1) {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
  }
  .item:nth-child(10n+10) {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 5;
  }
}


/*END:Desktop Style */

<!--START:  Set 1-->
<div class="parent">
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->



  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->



  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->



  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->


</div>
<!--END:  Set 1-->

Run codeHide result

I can not reach the pattern than the first.

It only works when I give a hard-coded value to a property grid-row-start.

Note. Do not modify the structure of the DOM. Thanks in advance for any help.

Answer 1

Using a little trick, I achieved the desired layout in basic HTML.

I changed the color of critical elements to make them easier to track

.grid {
  width: 200px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 50px;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-auto-flow: dense;
  transform: rotateY(180deg);
}

.cell {
  background: tomato;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
}

.cell:nth-child(10n + 1) {
  background: lightgreen;
  grid-column: span 2;
  grid-row: span 2;

}

.cell:nth-child(10n + 10) {
  background: lightblue;
  grid-column: span 2;
  grid-row: span 2;

}

.cell:nth-child(10n + 8) {
  background: yellowgreen;
  grid-column: 1;
}

.cell:nth-child(10n + 9) {
  background: yellow;
  grid-column: 2;
}

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
  <div class="cell">15</div>
  <div class="cell">16</div>
  <div class="cell">17</div>
  <div class="cell">18</div>
  <div class="cell">19</div>
  <div class="cell">20</div>
  <div class="cell">21</div>
  <div class="cell">22</div>
  <div class="cell">23</div>
</div>

Run codeHide result

Now the same layout without a trick (but using more rules)

.grid {
  width: 200px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: 50px;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  grid-auto-flow: dense;
}

.cell {
  background: tomato;
  width: 100%;
  height: 100%;
}

.cell:nth-child(10n + 1) {
  background: lightgreen;
  grid-column: 3 / 5;  /* strange behaviour */
  grid-row: span 2;
}

.cell:nth-child(10n + 2),
.cell:nth-child(10n + 4) {
  background: papayawhip;
  grid-column: 2;

}

.cell:nth-child(10n + 6),
.cell:nth-child(10n + 8) {
  background: yellowgreen;
  grid-column: 4;
}

.cell:nth-child(10n + 7),
.cell:nth-child(10n + 9) {
  background: yellow;
  grid-column: 3;
}

.cell:nth-child(10n + 10) {
  background: lightblue;
  grid-column: 1 / 3;    /* strange behaviour */
  grid-row: span 2;

}

<div class="grid">
  <div class="cell">1</div>
  <div class="cell">2</div>
  <div class="cell">3</div>
  <div class="cell">4</div>
  <div class="cell">5</div>
  <div class="cell">6</div>
  <div class="cell">7</div>
  <div class="cell">8</div>
  <div class="cell">9</div>
  <div class="cell">10</div>
  <div class="cell">11</div>
  <div class="cell">12</div>
  <div class="cell">13</div>
  <div class="cell">14</div>
  <div class="cell">15</div>
  <div class="cell">16</div>
  <div class="cell">17</div>
  <div class="cell">18</div>
  <div class="cell">19</div>
  <div class="cell">20</div>
  <div class="cell">21</div>
  <div class="cell">22</div>
  <div class="cell">23</div>
</div>

Run codeHide result

Answer 2

DOM - , :

• grid-auto-flow: row ( )
• grid-auto-flow: column

, , . .

. , .

, HTML, , 10 .

.parent {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
  direction: rtl;
  padding-bottom: 20px;
}

.item.Box-1:nth-child(odd) {
  grid-column: 1 / span 2;
  grid-row-end: span 2;
}

.item.Box-5:nth-child(even) {
  grid-column: 3 / span 2;
  grid-row-end: span 2;
}

.item--img-cont img {
  width: 100%;
}

.item--text-cont {
  color: white;
}

.item {
  background: black;
}

<!--START:  Set 1-->
<div class="parent">
  <!--START:  Item-->
  <div class="item Box-1">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item Box-5">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->



  <!--START:  Item-->
  <div class="item Box-1">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item Box-5">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item Box-1">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item Box-5">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item Box-1">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
  <!--START:  Item-->
  <div class="item Box-5">
    <div class="item--img-cont">
      <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
    </div>
    <div class="item--text-cont">
      This is dummy text . It is variable
    </div>
  </div>
  <!--END:  Item-->
</div>
<!--END:  Set 1-->

Hide result

jsFiddle demo

Answer 3

You need to put your 2x2 images in a sub-segment. Wrap the contents in divand apply to them display:grid:

.parent {
  display: grid;
  grid-template-columns: calc(50% - 20px) calc(50% - 20px);
  grid-gap: 20px;
}

.parent>div {
  display: inline-grid;
  grid-gap: 20px;
  padding-bottom: 20px;
}

.parent .grid_2 {
  grid-template-columns: 50% 50%;
}

.item--img-cont img {
  width: 100%;
}

.item--text-cont {
  color: white;
}

.item {
  background: black;
}

<!--START:  Set 1-->
<div class="parent">
  <div class="grid_2">
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
  </div>
  <div class="grid_1">
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
  </div>
  <div class="grid_1">
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
  </div>
  <div class="grid_2">
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
  </div>
  <div class="grid_2">
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
  </div>
  <div class="grid_1">
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
  </div>
  <div class="grid_1">
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-1" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
  </div>
  <div class="grid_2">
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-2" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-3" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-4" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
    <!--START:  Item-->
    <div class="item">
      <div class="item--img-cont">
        <img src="http://via.placeholder.com/1600x900?text=Box-5" alt="placeholder-image" />
      </div>
      <div class="item--text-cont">
        This is dummy text . It is variable
      </div>
    </div>
    <!--END:  Item-->
  </div>
</div>

Run codeHide result