我想创建一个由重复图案组成的网格布局

Question

我已经部分成功了，但由于某种原因，第5个、第6个和第7个孩子不听我给他们设置的顺序。

.grid{
    display: grid;
    gap: 20px;

    display: grid;
    grid-gap: 15px;

    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    grid-auto-rows: 50px; /* height of one row */
}

.grid > .item:nth-child(9n+1),
.grid > .item:nth-child(9n+7){
    grid-area: span 2 / span 1;
    background-color: red;

}

.grid > .item:nth-child(9n+2),
.grid > .item:nth-child(9n+3),
.grid > .item:nth-child(9n+5),
.grid > .item:nth-child(9n+6){
  grid-area: span 1 / span 1;
  background-color: green;
}

.grid > .item:nth-child(9n + 4) {
  grid-area: span 2 / span 2; 
  background-color: yellow;
}

.grid > .item:nth-child(9n+7){
    grid-area: span 2 / span 1; 
    background-color: red; 
}

 .grid > .item:nth-child(9n+8),
 .grid > .item:nth-child(9n+9) {
    background-color: deepskyblue;
    grid-area: span 2 / span 1; 
 }

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

基本上，红色和绿色项目再次出现时应该表现相同，只是在反面。 我通常不使用 display:grid;，我很想听听为什么会发生这种情况，以及是否有办法让它像我想要的那样显示。

Answer 1

您需要明确地将第 6 个项目放置在第一列上，否则它将放置在第二列上的红色元素（第 7 个元素）之前。

.grid{
    display: grid;
    gap: 20px;

    display: grid;
    grid-gap: 15px;

    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    grid-auto-rows: 50px; /* height of one row */
}

.grid > .item:nth-child(9n+1),
.grid > .item:nth-child(9n+7){
    grid-area: span 2 / span 1;
    background-color: red;
}
.grid > .item:nth-child(9n+2),
.grid > .item:nth-child(9n+3),
.grid > .item:nth-child(9n+5),
.grid > .item:nth-child(9n+6){
  background-color: green;
}
.grid > .item:nth-child(9n+6){
  grid-column: 1;
}

.grid > .item:nth-child(9n + 4) {
  grid-area: span 2 / span 2; 
  background-color: yellow;
}

.grid > .item:nth-child(9n+7){
    grid-area: span 2 / span 1; 
    background-color: red; 
}

 .grid > .item:nth-child(9n+8),
 .grid > .item:nth-child(9n+9) {
    background-color: deepskyblue;
    grid-area: span 2 / span 1; 
 }

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