时间戳

首页 > 解决方案 > 重复 CSS 网格而不定义更多网格区域

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

问题描述

我正在尝试使用 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 提供特定区域类也很好。这可以使用网格实现吗？

标签： csscss-grid

解决方案

就像下面这样：

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

推荐阅读