如何将固定高度的行作为带百分比的网格中的最后一行

<style>
  .container {
    display: grid;
    grid-template-rows: repeat(3, 30%);
    grid-auto-rows: 1fr;
    grid-gap: 10px;
    height: 300px;
  }

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

  .item:last-child {
    height: 50px; /* 固定高度的最后一行 */
  }
</style>

<div class="container">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <div class="item">内容3</div>
  <div class="item">内容4</div>
  <div class="item">内容5</div>
  <div class="item">内容6</div>
  <div class="item">内容7</div>
</div>