CSS Row-Gap Manage Space Between Rows

<div class="flex-row-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
</div>

.flex-row-gap {
  background-color: #776fac;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 25px;
}

.flex-row-gap > div {
  background-color: aliceblue;
  margin: 5px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 18px;
  width: 100px;
}

<div class="grid-row-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

.grid-row-gap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  row-gap: 25px;
  height: 300px;
}

.grid-row-gap > div {
  background-color: aliceblue;
  border: 1px solid green;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

<div class="flex-row-gap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
</div>

<button onclick="changeRowGap('50px')">Set row-gap to 50px</button>
<button onclick="changeRowGap('normal')">Set row-gap to normal</button>
<button onclick="changeRowGap('initial')">Set row-gap to initial</button>
<button onclick="changeRowGap('inherit')">Set row-gap to inherit</button>

.flex-row-gap {
  background-color: #776fac;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  row-gap: normal;
}

.flex-row-gap > div {
  background-color: aliceblue;
  margin: 5px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 18px;
  width: 100px;
}

function changeRowGap(value) {
  document.querySelector('.flex-row-gap').style.rowGap = value;
}