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

【问题标题】：Repeating CSS grid without defining more grid areas重复 CSS 网格而不定义更多网格区域
【发布时间】：2021-09-02 04:55:44
【问题描述】：

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

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

我已经设法使用网格模板区域来实现这一点，但我正在使用 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 提供特定区域类也很好。使用网格可以实现吗？

【问题讨论】：

你为什么不把你的 css 包含到 php foreach 中并动态填充它，并为每个 div 分配一个唯一的 id
我可以这样做 - 只是想看看是否有更简单的方法没有。接受的答案看起来不错。

标签： css css-grid

【解决方案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>

【讨论】：