The borders overlapped when I created a Grid layout with bordered item.

I found a way to resolve this after tried several ways in different blos (none of them works).

Here’s the codes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Container
.templates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, auto));
}

// Item
.adventure_challenge_list_main .template_item {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    top: -1px;
    right: 0px;
    bottom: 0px;
    left: -1px;
    border: 1px solid #c4c4c4;
  }
  &:hover {
    &::after {
      z-index: 1;
      border: 2px solid #2193F0;
    }
  }
}

Yes, I use the ::after style to make the item border, and change the border color when hovering item.

Notice that the position of ::after element must be top: -1; and left: -1;, so that the border between two item will not be overlapped.

The z-index style of hovered element is to cover the original border color.