如何创建这样的非对称网格布局？

<div class="grid-container">
  <div class="grid-item">网格单元1</div>
  <div class="grid-item">网格单元2</div>
  <div class="grid-item">网格单元3</div>
  <div class="grid-item">网格单元4</div>
  <div class="grid-item">网格单元5</div>
  <div class="grid-item">网格单元6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 定义3列等宽网格 */
  grid-gap: 10px; /* 设置网格间距 */
}

.grid-item {
  background-color: #ccc;
  padding: 20px;
}

/* 自定义每个网格单元的大小和位置 */
.grid-item:nth-child(1) {
  grid-column: 1 / span 2; /* 占据2列 */
  grid-row: 1 / span 2; /* 占据2行 */
}

.grid-item:nth-child(2) {
  grid-column: 3; /* 占据第3列 */
  grid-row: 1; /* 占据第1行 */
}

.grid-item:nth-child(3) {
  grid-column: 1; /* 占据第1列 */
  grid-row: 3; /* 占据第3行 */
}

.grid-item:nth-child(4) {
  grid-column: 2; /* 占据第2列 */
  grid-row: 3; /* 占据第3行 */
}

.grid-item:nth-child(5) {
  grid-column: 3; /* 占据第3列 */
  grid-row: 2; /* 占据第2行 */
}

.grid-item:nth-child(6) {
  grid-column: 1 / span 2; /* 占据2列 */
  grid-row: 4; /* 占据第4行 */
}