Grid borders superimposed

Design help General
1

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

2

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

Bonus: Gradients, if you want.

3

Of course ! Thank you :slight_smile:

4

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

Capture d’écran 2021-03-25 145524
Capture d’écran 2021-03-25 1455242350×1299 350 KB

5

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.

6

It’s perfect like that thank you again