grid布局左边三行右边两行

以下是使用grid布局实现左边三行右边两行的示例：

<style>
.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

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

.item:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 3;
}

.item:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.item:nth-child(3) {
  grid-column: 2;
  grid-row: 3;
}
</style>

<div class="container">
  <div class="item">左边第一行</div>
  <div class="item">左边第二行</div>
  <div class="item">左边第三行</div>
  <div class="item">右边第一行</div>
  <div class="item">右边第二行</div>
</div>

这段代码使用了grid布局，通过设置`grid-template-columns`和`grid-template-rows`属性来定义网格的列数和行数。通过`grid-column`和`grid-row`属性来指定每个元素所在的网格位置。其中，左边三行的元素占据了第一列的三个网格，右边两行的元素占据了第二列的两个网格。