CSS复杂网格布局

您的模式每9个元素重复一次，因此您可以尝试以下考虑的方式 nth-child(9n + x)

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow:dense; /* to fill all the empty cells */
  grid-auto-rows: 50px;
}

 /* 2 rows for 1 and 4 and 7*/
.wrapper > div:nth-child(9n + 1),
.wrapper > div:nth-child(9n + 4),
.wrapper > div:nth-child(9n + 7) {
  grid-row:span 2;
  background:red;
}

/* force the 3rd element on column 2*/
.wrapper > div:nth-child(9n + 3) {
 grid-column:2;
}

/* force the 6th element on column 1*/
.wrapper > div:nth-child(9n + 6) {
 grid-column:1;
}

.wrapper>div {
  background: blue;
  border: 1px solid black;
  color:#fff;
  font-size:2em;
}

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18