CSS网格重复模式问题

Question

尝试使用css grid实现如下图所示的重复模式：

尝试使用CSS网格，请参阅代码笔

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我无法实现第一个模式。

仅当我为grid-row-start属性提供硬编码值时才有效。

注意：不要改变DOM结构。提前感谢您的帮助。

Answer 1

在不改变DOM结构的情况下，由于网格项自动定位的方式，因此需要进行一些硬编码：

• grid-auto-flow: row（默认）
• grid-auto-flow: column

您可能需要考虑为需要更大尺寸的每个项目添加一个类。这将使他们的目标更简单，更容易。

在下面的示例中，调整大小问题已完成。您只需要决定如何定位每个项目。

同样，如果您可以重新构建HTML，也许您可​​以将每组10个项放入一个网格容器中，并重复该块。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

jsFiddle demo

Answer 2

使用一点技巧，我已经在基本HTML上实现了您想要的布局。

我更改了关键项目的颜色，以便更容易跟踪

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

现在，相同的布局没有技巧（但使用更多规则）

＆＃13;

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您需要将2x2图像放入子网格中。将您的内容包含在div中并将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>