CODEWITHSUNDEEP
csscss-grid
shoosh
shoosh

Reputation: 78914

With CSS grid, is it possible to add a border lines in the gaps?

I have a grid with column and row gaps of 10px and I'd like to add a 1px solid line in the middle of the gap.
How do I do that? Setting the gap size to 0 and using padding in the cells works but also adds the padding and lines at the edges of the grid, which I don't want.

Upvotes: 2

Views: 4220

Answers (1)

buondevid
buondevid

Reputation: 716

Pseudo code:

**HTML**
grid
 element
 element
 element
/grid

**CSS**
grid
 display: grid
 gap: 1px
 background-color: black

element
 padding: 10px (depends how much distance you want from the line)
 background-color: white (everything but transparent)

Basically you will use container background color as a way to color the gaps, then you will set a background on elements (to not see the parent's one) and use a padding to set a distance from the gap line.

Upvotes: 1

Related Questions