CODEWITHSUNDEEP
csscss-grid
Py.
Py.

Reputation: 3599

Drawing column/rows in incomplete css3 grid

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>

Upvotes: 1

Views: 159

Answers (2)

mchl18
mchl18

Reputation: 2336

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>

Upvotes: 1

vanntile
vanntile

Reputation: 2787

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>

Upvotes: 1

Related Questions