Amigos alguém sabe se tem como colocar um valor de gap diferente pra cada linha do grid? Tipo no caso abaixo colocar grid-row-gap: 0px
entre a primeira e a segunda linha e depois colocar 10px entre as outras linhas
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>