Grid borders superimposed

Hi,

I have a small design problem with my grid.

I wanted to have a border of 2px all around my different boxes. The thing is that borders are superimposed on the sides because of boxes being next to each others. I want to keep them with no gap between them but I would like to find a way to not have a 4px(2+2) borders on the sides.

Is there a simple way or should I think of an other way to display them ?

Thank you !


Here is my site Read-Only: LINK

You could use a gap between grid items and background on the grid container.

Bonus: Gradients, if you want.

Of course ! Thank you :slight_smile:

Oh but now I have a black background when there is empty space…

I see. That solution is simpler, but does not work with empty grid space …

A bit more work, but this should do it: Give the container left and top border. The items get bottom and right border.

Hopefully, CSS grid will get that right in the future.

It’s perfect like that thank you again