Borders Overlapped in Grid Layout

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.

原文作者: dgb8901,yinxing

原文链接: https://www.itwork.club/2021/05/14/grid-border-overlap/

版权声明: 转载请注明出处

为您推荐

体验小程序「简易记账」

关注公众号「特想学英语」

CentOS安装Mysql