对齐网格行项目但不对齐

Question

网格中的行与上一行中的最大项垂直对齐。由于网格中的每个项目都有特定的高度，因此我得到了一些不需要的空间。可以删除它吗？

.grid {
  border: 2px solid black;
  max-width: 600px;
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax(250px, 1fr) );
  align-items: start;
}

.item {
  border: 1px dotted black;
}

.item-1{
  background-color: orange;
  height: 18px;
}
.item-2{
  background-color: lightgreen;
  height: 36px;
}
.item-3{
  background-color: lightblue;
  height: 36px;
}
.item-4{
  background-color: lightgray;
  height: 24px;
}

<div class="grid">
         <div class="item item-1"></div>
        <div class="item item-2"></div>
        <div class="item item-3">Align me to orange item</div>
       <div class="item item-4"></div>
</div>