如何为未知数量的项目交替网格模式

Question

我想创建一个重复的网格。每行三个项目。

第一行：项目一跨越 2 列和 2 行。其次是第 2 项和第 3 项，跨越 1 列和 1 行。

第二行是相反的：项目一和项目二跨越 1 列和 1 行。项目 3 跨越 2 列和 2 行。

请参阅下图了解我正在尝试做的事情。我想要无限数量的行和项目。

.container {
  width: 100%;
  margin: 0 auto;
  max-width: 80%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

h2 {
  font-size: 16px;
  font-family: sans-serif;
  font-weight: normal;
}

.item {
  background: pink;
}

.item:nth-child(3n+1) {
  grid-column: auto /span 2;
  grid-row: auto /span 2;

}

.item:nth-child(3n+2),
.item:nth-child(3n+3) {
  /* grid-area: 1 / 3 / 2 / 4; */
  border: 1px solid red;
  grid-column: auto /span 1;
  grid-row: auto /span 1;
}

.container.two .item:nth-child(3n+1) {
    border: 5px solid yellow;
    grid-area: 1 / 1 / 2 / 2;
  }
  
.container.two .item:nth-child(3n+2) {
    border: 5px solid orange;
    grid-area: 2 / 1 / 3 / 2;

  }

.container.two .item:nth-child(3n+3) {
    border: 5px solid red;
    grid-area: 1 / 2 / 3 / 4;
  }


img {
  max-width: 100%;
}

<h2>
I have this using "grid-column" and "grid-row"...
</h2>
<div class="container">
  <div class="item">
    First
  </div>
  <div class="item">
    Second
  </div>
  <div class="item">
    Third
  </div>
</div>

<hr />

<h2>
I want to alternate that, but I only understand how to with "grid-area"...
</h2>
<div class="container two">
  <div class="item">
    First
  </div>
  <div class="item">
    Second
  </div>
  <div class="item">
    Third
  </div>
</div>
<hr/>
<h2>
But I want to have an unlimited amount of items alternate those patterns...
</h2>
<div class="container">
  <div class="item">
    First
  </div>
  <div class="item">
    Second
  </div>
  <div class="item">
    Third
  </div>
  <div class="item">
    First
  </div>
  <div class="item">
    Second
  </div>
  <div class="item">
    Third
  </div>
  <div class="item">
    First
  </div>
  <div class="item">
    Second
  </div>
  <div class="item">
    Third
  </div>
  <div class="item">
    First
  </div>
  <div class="item">
    Second
  </div>
  <div class="item">
    Third
  </div>
  <div class="item">
    First
  </div>
  <div class="item">
    Second
  </div>
  <div class="item">
    Third
  </div>
</div>

Answer 1

您可以像下面这样操作：

.container {
  display:grid;
  grid-template-columns:repeat(3,1fr); /* 3 columns */
  grid-auto-flow:dense; /* make sur to fill all the area */
  grid-auto-rows:50px; /* height of one row */
  grid-gap:5px;
}
.container * {
  background:red;
}
/* the pattern repeat each 6 elements */
.container :nth-child(6n + 1),
.container :nth-child(6n + 6){
  grid-area:span 2/span 2; /* 1 and 6 take 2 rows and 2 columns */
}

.container :nth-child(6n + 5){
  grid-column:1; /* 5 at first column */
}

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

如何为未知数量的项目交替网格模式

How to alternate grid pattern for unknown number of items

css

css-grid