How to make an element of a Grid take all remaining space?

1st: Give the grid a min-height like 100vh (.grid { min-height: 100vh; }). This will make consume at least the viewports height.

2nd: Give the the first and last row a height of min-content. That will make it only consume as much height as needed. auto will then consume all remaining space by default.

.grid {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: min-content auto min-content;
  row-gap: 1%;
}

.top-bar{
  background-color: blue;
  border-radius: 5px;
}

.main-menu{
  justify-self: center;
  display: flex;
  flex-direction: column;
  background-color: green;
}

.bottom-bar{
    background-color: red;
    border-radius: 5px;
}

<div class="grid">
  <div class="top-bar">
    <h1>
     Title
    </h1>
  </div>
  <div class="main-menu">
    <button>
      One Button
    </button>
    <button>
     Other Button
    </button>
  </div>
  <div class="bottom-bar">
   <p>
     I'm a text
   </p>
  </div>
</div>

Try using 100vh

.grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 1%;
    height: 100vh;
}

and add specific height for the .top-bar abd .bottom-bar

You could approach this using Flexbox and 100vh as show below.

.grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.top-bar{
  display: flex;
  height: 20%;
}

.main-menu{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60%;
}

.main-menu button {
  height: 60px;
  width: 120px;
}

.bottom-bar{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20%;
}