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

似乎您必须添加剩余的单元格，而不必添加类。我认为您需要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>

Answer 2

正如我在评论中所说，您可以使用背景线性渐变，而无需使用VehicleDto

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;
}

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

2 个答案: