让CSS网格行填充可用空间

.wrapper {
  border: 1px solid blue;
  height: 300px;
  width: 250px;
  padding: 10px;
}

.grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100px auto;
  grid-template-rows: repeat(2, min-content);
  row-gap: 7px;
}

.grid>div {
  width: 100%;
  height: 100%;
  border: 1px solid;
}

.button {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  grid-column: 1 / -1;
}

<div class="wrapper">
  <div class="grid">
    <div>
      R1C1
    </div>
    <div>
      R1C2
    </div>
    <div>
      R2C1
    </div>
    <div>
      R2C2
    </div>
    <div class="button">
      Button
    </div>
  </div>
</div>