display grid using different grid-row-gap for each row

Friends do you know if you can put a different gap value for each grid line? Type in the case below put grid-row-gap: 0px between the first and second line and then put 10px between the other lines

link pro codepen

html, body {
  height: 100%;
}
.grid {
    display: grid;
    height: 100%;
    width: 100%;

    grid-template-areas: "title title"
                         "score board"
                         "score board"
                         "stats ctrls";

    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-row-gap: 10px;
}

#title    { grid-area: title;
            background-color: purple; }

#score    {
    grid-area: score;
    background-color: yellow;

}
#stats    { grid-area: stats; background-color: red;}
#board    { grid-area: board; background-color: blue;}
#controls { grid-area: ctrls; background-color: green;}

<div class="grid">
  <div id="title">title</div>       
  <div id="score">score</div>
  <div id="board">board</div>
  <div id="stats">stats</div>
  <div id="controls">controls</div>
</div>