重复CSS网格而不定义更多网格区域

Question

我正在尝试使用CSS网格在以下约束条件下布局一些内容。

我有三个div -所有的div都应该是50%宽的，但是div 2和3应该堆叠在div 1旁边。

我已经设法使用grid -template-area实现了这一点，但我使用PHP动态填充它，所以不能保证总是有三个div，所以如果它超过这个数量，我只是希望网格重复。

我现在正在使用下面的代码：

.container {
  display: grid;
  grid-template-columns: 50% 50% 50%;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "Grid-1 Grid-2 ."
    "Grid-1 Grid-3 ."
    ". . .";
}

.Grid-2 { grid-area: Grid-2; }

.Grid-3 { grid-area: Grid-3; }

.Grid-1 { grid-area: Grid-1; }


html, body , .container {
  height: 100%;
  margin: 0;
}

.container * {
  border: 1px solid red;
  position: relative;
}

.container *:after {
  content:attr(class);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="Grid-1"></div>
  <div class="Grid-2"></div>
  <div class="Grid-3"></div>
</div>

如果不需要给我生成PHP的每个div指定一个特定的area类，那就更好了。这可以使用grid实现吗？

Answer 1

简单地如下所示：

​

.container {
  display: grid;
  grid-template-columns: 50% 50%; /* 2 columns */
  grid-auto-rows:50vh; /* size of one row*/
}
/* for each 3 divs make the first one span 2 rows */
.container > :nth-child(3n + 1) { grid-row:span 2 }

.container * {
  border: 1px solid red;
  display: grid;
  place-items: center;
}

.container *:after {
  content:"some content";
}

body {
  margin: 0;
}

<div class="container">
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

​