CSS 网格重复模式问题

Question

尝试使用 css 网格实现如下图中的重复模式：

尝试使用CSS网格，见代码笔

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

我无法实现第一个模式。

只有当我给出 grid-row-start 属性的硬编码值时它才有效。

注意：不要更改 DOM 结构。在此先感谢您的帮助。

Answer 1

您需要将 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>

Answer 2

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

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

您可能需要考虑为每件需要加大尺码的商品添加 class。这将使定位他们变得更加简单和容易。

在下面的示例中，尺码问题已完成。您只需要决定如何放置每个项目。

同样，如果您可以重新构造 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-->

jsFiddle demo

Answer 3

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

我更改了关键项目的颜色，以便于跟踪它们

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

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

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

CSS 网格重复模式问题

CSS Grid Repeat Pattern Issue

html

css

css-grid

jsFiddle demo