CSS Grid - 可重复的网格模板区域

Question

假设我们有一个包含7个项目的新闻条目列表。

我用CSS Grid创建了一个模式，它应该在6个项目之后重复。

@supports (display: grid)
{
  .list
  {
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
    "bigLeft bigLeft right1 right2"
    "bigLeft bigLeft bigRight bigRight"
    "left1 left2     bigRight bigRight";
  }

  .item:nth-of-type(6n+1)
  {
    grid-area: bigLeft;
  }
  .item:nth-of-type(6n+2)
  {
    grid-area: right1;
  }
  .item:nth-of-type(6n+3)
  {
    grid-area: right2;
  }
  .item:nth-of-type(6n+4)
  {
    grid-area: left1;
  }
  .item:nth-of-type(6n+5)
  {
    grid-area: left2;
  }
  .item:nth-of-type(6n+6)
  {
    grid-area: bigRight;
  }
}

期望的grid-template-areas模式：

现在我希望这种模式重复并重复添加到列表中的更多项目。 但HERE你可以看到，只要添加第7个项目，模式就不会继续，而是被替换。

我也尝试了这个没有命名的区域

.item:nth-of-type(6n+1) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.item:nth-of-type(6n+2) {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.item:nth-of-type(6n+3) {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
}
.item:nth-of-type(6n+4) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}
.item:nth-of-type(6n+5) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}
.item:nth-of-type(6n+6) {
  grid-column: 3 / 5;
  grid-row: 2 / 4;
}

但结果相同......

我没有在规范中找到任何解决方案来完成“可重复的网格模板区域”

你们有没有想法？

Answer 1

grid-templates-areas覆盖了grid-template-rows＆amp; -columns。您必须选择一种或另一种方式来描述网格布局。

对于重复模式，您可以使用:nth-child(n)并重置生成值：（https://codepen.io/gc-nomade/pen/qVdpwL）或下面的代码段

＆＃13;

＆＃13;

.grid {
  width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-gap: 25px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  padding: 10px;
  counter-reset:div
}
.item:nth-child(6n + 4),
.item:nth-child(6n + 1) {
  grid-column: auto /span 2;
  grid-row: auto /span 2;
}
.item {
  border: solid;
  display:flex;
}
.item:before {
  counter-increment:div;
  content:counter(div);
  margin:auto;
  font-size:40px;
}

＆＃13;

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您的元素是随机的，但需要放置在网格中的特定位置（第6个位于第4个位置并且跨越），那么您需要为每个元素设置一个订单值:( ....有你＆ ＃39;如果内容和订单可能不同，则需要在javascript上转发