Drawing column/rows in incomplete css3 grid

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>

Just drawing the grid. Something like https://static1.squarespace.com/static/5511fc7ce4b0a3782aa9418b/t/552ef12ee4b0e9ead81ceefd/1429139759978/learning-the-grid-method.jpg — Py., Aug 03 '18 at 16:35
It can be done without the grid itself, as seen [here](https://stackoverflow.com/a/28344125/4679160) — vanntile, Aug 03 '18 at 16:39

mchl18 · Answer 1 · 2018-08-03T16:44:23.200

1

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>

edited Aug 03 '18 at 16:44

answered Aug 03 '18 at 16:39

mchl18

2,119
12
20

Ye i know this is a solution, I wanted to see if I missed something and it was doable without doing that. – Py. Aug 03 '18 at 16:56
@Py. the other comment shows how to draw background for each, it seems to do the job – mchl18 Aug 03 '18 at 17:03

score 1 · Answer 2 · answered Aug 03 '18 at 16:44

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>

answered Aug 03 '18 at 16:44

vanntile

2,727
4
26
48

The thing is, in my example the grid is preset. In my real usage, the grid does not contain a set number of column/rows and the column/rows can change in size. I edited the question to reflect that more accurately – Py. Aug 03 '18 at 16:54
@Py Then the width/height attributes will be dependent by the number f items in the grid. As long as you know the size of one item and the spacing in between, you can use the code. – vanntile Aug 03 '18 at 16:56
That's the thing, I don't know that in advance. – Py. Aug 03 '18 at 16:58
Sadly, I don't see other option otside the first answer. @Py – vanntile Aug 03 '18 at 17:03

Drawing column/rows in incomplete css3 grid

2 Answers2