Keep top and bottom rows fixed in a 3 row CSS Grid layout

Question

I am using CSS Grid to create a 3 row, 3 column layout. I want the top and bottom rows to be fixed in height, with the middle row adjusting its height based on viewport height.

HTML:

<div className="body_wrapper">
      <div className="body_wrapper_item"></div>
      <div className="body_wrapper_item"></div>
      <div className="body_wrapper_item"></div>
      <div className="body_wrapper_item"></div>
      <div className="body_wrapper_item"></div>
      <div className="body_wrapper_item"></div>
  </div>

CSS:

.body_wrapper {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-rows: 80px 70% 80px;
    grid-auto-columns: 33% 33% 33%;
    grid-gap: 10px;
}

.body_wrapper_item {
    background: pink;
    width: 100vw;
}

.body_wrapper_item:nth-child(1), .body_wrapper_item:nth-child(3) {
    background: #3D3D3D;
}

It looks correct when browser not resized:

But when reducing viewport height the bottom row shrinks rather than staying fixed:

To reiterate, I want to have the top and bottom rows fixed (80px) while the middle row adjusts with the window.

Answer 1

Just use "fraction of available space", as per @Temani's comment:

.body_wrapper {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-rows: 80px 1fr 80px;
    grid-auto-columns: 33% 33% 33%;
    grid-gap: 10px;
}