grid display using different grid-Row-gap for each line

Question

Friends does anyone know if there is a different gap value for each grid line? Type in the case below put grid-row-gap: 0px between the first and second lines and then place 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>

Answer 1

I don’t see the possibility of changing the grid individually within a collection of Divs within a div-mother. The solution I suggest is to force the first div to go 10px down and climb the 10px div-mom up. But this will generate a 20px spacing at the bottom of the div-mother:

On the block .grid, add:

top: -10px; position: relative;

On the block #title add:

top: 10px; position: relative;