Drawing column/rows in incomplete css3 grid - css

Question

I'm using css-grid to generate a grid like display. But this display does not contain an element for every cell.
Is it possible to draw the outline of every lines/rows using CSS without adding the missing elements?
Example of grid:
.grid {
display: grid;
grid-template-columns: 15px 25px 35px;
grid-template-rows: 30px 20px 10px;
grid-gap: 5px 5px;
}
.cell1 {
grid-area: 1 / 1 / span 1 / span 1;
background: green;
}
.cell2 {
grid-area: 3 / 3 / span 1 / span 1;
background : blue;
}
<div class="grid">
<div class="cell1"></div>
<div class="cell2"></div>
</div>

Answer 1

As I said in the comment, you can use background linear gradients, without css-grid
.grid {
display: grid;
grid-template-columns: 25px 25px 25px;
grid-template-rows: 25px 25px 25px;
grid-gap: 5px 5px;
background-image: repeating-linear-gradient(0deg,transparent,transparent 25px,#CCC 25px,#CCC 30px),repeating-linear-gradient(-90deg,transparent,transparent 25px,#CCC 25px,#CCC 30px);
background-size: 30px 30px;
background-position: -5px -5px;
width: 85px;
height: 85px;
}
.cell1 {
grid-area: 1 / 1 / span 1 / span 1;
background: green;
}
.cell2 {
grid-area: 3 / 3 / span 1 / span 1;
background : blue;
}
<div class="grid">
<div class="cell1"></div>
<div class="cell2"></div>
</div>

Answer 2

Seems like you have to add the remaining cells but just dont add a class.
I think you need the DOM element to render css without sth like canvas.
.grid {
display: grid;
grid-template-columns: 25px 25px 25px;
grid-template-rows: 25px 25px 25px;
grid-gap: 0;
}
.grid > * {
border: 1px solid rgb(137,153,175);
}
.cell1 {
grid-area: 1 / 1 / span 1 / span 1;
background: green;
}
.cell2 {
grid-area: 3 / 3 / span 1 / span 1;
background : blue;
}
<div class="grid">
<div class="cell1"></div>
<div class="cell2"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>