如何实现 grid 布局顶部对齐？

各位好，我在用 grid 做一个页面的布局，请看代码

<div class="fruit-grid">
    <div class="fruit">hello1</div>
    <div class="fruit">hello2</div>
    <div class="fruit">hello3</div>
    <div class="fruit">hello4</div>
    <div class="fruit">hello5</div>
    <div class="fruit">hello6</div>
    <div class="fruit">hello7</div>
</div>

我想实现的是一共分三列，最左边的一列是 hello1 和 hello2；中间是 3，4，5；最右侧是 6 和 7。 css 部分代码如下

.fruit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: start;
}

.fruit {
  width: 100%;
  margin-bottom: 10px;
}

/* 显示在最左 */
.fruit:nth-child(1),
.fruit:nth-child(2) {
  grid-column: 1;
}

/* 显示在中间 */
.fruit:nth-child(3),
.fruit:nth-child(4),
.fruit:nth-child(5) {
  grid-column: 2;
}

/* 显示在最右 */
.fruit:nth-child(6),
.fruit:nth-child(7) {
  grid-column: 3;
}

现在遇到的问题是，中间和右侧的内容不顶部对齐，我想要的显示形式是

1 3 62 4 7 5

但实际的效果是

1
2 3 
  4
  5 6
    7

请问这个该怎么解决，谢谢。

如上问题所说，想知道错在哪里了