Change CSS Grid vertical gap between rows

Question

How do I change the vertical gap in between each grid row?

I have tried with grid-gap, but that only changes the horizontal gap—not vertical. Any help would be appreciated.

.wrapper {
  background-color: #1c1c1c;
  border: solid black 1px;
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'header header header header header' 'menu content content content content' 'menu content content content content' 'footer footer footer footer footer';
}

.header {
  grid-area: header;
  border: solid white 1px;
  background-color: #3a3a3a;
  margin: 10px;
}

.menu {
  grid-area: menu;
  border: solid white 1px;
  background-color: #3a3a3a;
  margin: 10px;
}

.content {
  grid-area: content;
  border: solid white 1px;
  background-color: #3a3a3a;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
  overflow-y: scroll;
}

.footer {
  grid-area: footer;
  border: solid white 1px;
  background-color: #3a3a3a;
  margin: 10px;
}

.menu-item {
  list-style: none;
  text-align: center;
  margin: 10px;
  padding: 10px;
  border: solid white 1px;
  background-color: #1e1e1e;
  color: white;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.madeby {
  list-style: none;
  text-align: center;
  margin: 10px;
  padding: 10px;
  background-color: #1e1e1e;
  color: white;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.content {
  list-style: none;
  grid-area: content;
  margin: 10px;
  padding: 10px;
  background-color: #3a3a3a;
}

.top {
  list-style: none;
  text-align: center;
  margin: 10px;
  padding: 10px;
  background-color: #1e1e1e;
  color: white;
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.cell {
  border: solid white 1px;
  color: white;
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  height: 20px;
  line-height: 20px;
  background-color: #1e1e1e;
}

<div class="wrapper">

  <div class="header">
    <div class="top">header</div>
  </div>
  <div class="menu">
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
    <li class="menu-item">menu</li>
  </div>
  <div class="content">
    <input class="cell" type="text" value="dato">
    <input class="cell" type="text" value="nøkkelvaner">
    <input class="cell" type="text" value="oppsumering">
    <input class="cell" type="text" value="oppgaver">
    <input class="cell" type="text" value="andre">
    <input class="cell" type="text" value="dato">
  </div>
  <div class="footer">
    <div class="madeby">footer</div>
  </div>
</div>

Answer 1

From MDN:

grid-auto-rows

The grid-auto-rows CSS property specifies the size of an implicitly-created grid row track.

If a grid item is positioned into a row that is not explicitly sized by grid-template-rows, implicit grid tracks are created to hold it. This can happen either by explicitly positioning into a row that is out of range, or by the auto-placement algorithm creating additional rows.

From MDN:

min-content

min-content is a keyword representing the largest minimal content contribution of the grid items occupying the grid track.

In .content,

Replace this:

grid-template-rows: 1fr 1fr 1fr 1fr 1fr;

With this:

grid-auto-rows: min-content; 

Result:

jsFiddle