创建重复 CSS 网格布局

Question

我已经阅读了许多其他类似的问题，并尝试自己做了几天，但我一直在创建重复的 CSS 网格布局。

现在我已经成功创建了应有的布局，但它最多只能用于 6 个项目。如果添加更多，它们会与当前项目重叠，因为它们卡在同一个网格中 space。我需要网格无限适用于它下面的所有项目。我已经尝试过使用 :nth-child，无论是在网格容器中定义 grid-template-areas 还是使用 grid-area 在个别项目上（如下面注释所示）。

.grid-container {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
  "BigLeft BigLeft BigLeft SmallRight1 SmallRight1"
  "BigLeft BigLeft BigLeft SmallRight2 SmallRight2"
  "SmallLeft1 SmallLeft1 BigRight BigRight BigRight"
  "SmallLeft2 SmallLeft2 BigRight BigRight BigRight";
}

.item {
  background: #222;
}

.grid-container > .item:nth-child(6n+1) {
  /* grid-area: 1 / 1 / 3 / 4; */
  grid-area: BigLeft;
  min-height: 60vh;
}

.grid-container > .item:nth-child(6n+2) {
  /* grid-area: 1 / 4 / 2 / 6; */
  grid-area: SmallRight1;
  min-height: 300px;
}

.grid-container > .item:nth-child(6n+3) {
  /* grid-area: 2 / 4 / 3 / 6; */
  grid-area: SmallRight2;
  min-height: 300px;
}

.grid-container > .item:nth-child(6n+4) {
  /* grid-area: 3 / 1 / 4 / 3; */
  grid-area: SmallLeft1;
  min-height: 300px;
}

.grid-container > .item:nth-child(6n+5) {
  /* grid-area: 4 / 1 / 5 / 3; */
  grid-area: SmallLeft2;
  min-height: 300px;
}

.grid-container > .item:nth-child(6n+6) {
  /* grid-area: 3 / 3 / 5 / 6; */
  grid-area: BigRight;
  min-height: 60vh;
}

<div class="grid-container">
  <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>

如何在当前网格下方重复（现在有 6 个项目的）网格布局，并使其适用于可能跟随的尽可能多的项目？

Answer 1

不要明确定义区域，只定义尺寸，让浏览器为您完成这项工作

.grid-container {
  display: grid;
  grid-gap: 15px;
  grid-auto-flow:dense;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 150px; /* height of one row */
}

.item {
  background: #222;
}

.grid-container > .item:nth-child(6n+1),
.grid-container > .item:nth-child(6n+6){
  grid-area: span 2/span 3; /* take 2 rows and 3 columns */
}

.grid-container > .item:nth-child(6n+2),
.grid-container > .item:nth-child(6n+3),
.grid-container > .item:nth-child(6n+4){
  grid-column: span 2; /* take 2 columns */
}

.grid-container > .item:nth-child(6n+5){
  grid-column: 1/span 2; /* take 2 columns and start at column 1*/
}

<div class="grid-container">
  <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>

创建重复 CSS 网格布局

Creating a repeating CSS Grid layout

css

css-grid