在不完整的css3网格中绘制列/行

Question

我正在使用css-grid来生成类似于显示的网格。但是这个显示不包含每个单元格的元素。

是否可以使用CSS绘制每个行/行的轮廓而不添加缺少的元素？

网格示例：

.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

正如我在评论中所说，你可以使用背景线性渐变，而不使用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

好像你必须添加剩余的单元格，但只是不添加类。我认为你需要DOM元素来渲染css而不像画布那样。

.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>