CSS Grid Repeat Pattern Issue

Question

Trying to achieve the repeating patterns like the one in the image below using css grid:

Tried using the CSS grid , see the code pen

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

I am not able to achieve the pattern than the first one.

It is working only when I give the hardcoded value for grid-row-start property.

Note: Don't change the DOM structure. Thanks in advance for any help.

Answer 1

Using a little bit of a trick, I have achieved your desired layout on a basic HTML.

I have changed the color of the critical items so that they are 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>

Now, the same layout without the 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>

Answer 2

Without changing the DOM structure, some hard-coding will be necessary because of the way grid items are positioned automatically:

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

You may want to consider adding a class to each item that needs larger sizing. That will make targeting them much simpler and easier.

In the example below, the sizing issue is complete. You just need to decide how to position each item.

Again, if you can re-structure the HTML, maybe you could place each set of 10 items into one grid container, and repeat that block.

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

jsFiddle demo

Answer 3

You need to place your 2x2 images into a sub-grid. Wrap your content into divs and apply display:grid to them:

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