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

You can use grid-gap property to solve this, It's a shorthand property for grid-row-gap and grid-column-gap. The first value is horizontal gap (row gap), second value is vertical gap (column gap)

grid-gap: 10px 20px;

You can also use the following properties to set gap between the grids:

grid-row-gap: 10px;

grid-column-gap: 20px;

According to the Mozilla Docs:

This property is specified as a value for <'row-gap'> followed optionally by >value for <'column-gap'>. If <'column-gap'> is omitted, it’s set to the same >value as <'row-gap'>.

So, in your code you only sets the grid-gap for row, you should also add the second value for column (vertical)