0

In this example I'm creating grid cells using just a repeat option:

<div class="test"></div>
.test {
    display: grid;
    grid-template-rows: 10px 10px 10px repeat(3, 10px);
    grid-template-columns: 15px repeat( 3, 10px );
    background-color: lime;
    gap: 5px;
}

https://jsfiddle.net/anniebbird/s73enpyd/6/

Here is the grid when I inspect it with developer tools:

enter image description here

I wonder is it possible to make those gaps visible with a different color? Basically, I need to show borders between the cells.

Clarification: as I showed in my example my grid will not have child elements, but a variable (and dynamic) number of cells built using the repeat option, that's why it's tricky

Anna
  • 2,911
  • 6
  • 29
  • 42
  • I think you might have to have individual child elements for each grid square, and use `background-color` on `.test` for the colour of the grid gaps, and set `background-color` of each child to something different. – MrSandyWilly Feb 01 '22 at 09:58
  • 1
    Just give the grid container a background color to the children – Paulie_D Feb 01 '22 at 09:59
  • Does this answer your question? [CSS Grid: Is it possible to apply color to grid gaps?](https://stackoverflow.com/questions/45884630/css-grid-is-it-possible-to-apply-color-to-grid-gaps) – Fabian S. Feb 01 '22 at 10:40
  • this will not work because my grid will not have child elements, but a variable number of cells built using the repeat option as I showed in my example – Anna Feb 01 '22 at 11:54
  • You can try removing gap and giving borders to grid blocks and give color to borders? – harionloop Feb 01 '22 at 12:23
  • there are no grid blocks, they were created with repeat option – Anna Feb 01 '22 at 12:56

0 Answers0