Streaming live at 10am (PST)

Grid borders superimposed


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:

1 Like

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.

1 Like

It’s perfect like that thank you again

1 Like