要实现不改变网格大小的情况下的网格列间隙,可以使用伪元素和负边距来实现。以下是一个示例代码:
HTML:
Item 1
Item 2
Item 3
Item 4
CSS:
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 0;
overflow: hidden;
}
.item {
position: relative;
background-color: gray;
padding: 10px;
text-align: center;
}
.item::after {
content: "";
position: absolute;
top: 0;
right: -10px;
bottom: 0;
width: 10px;
background-color: white;
}
在这个示例中,我们创建了一个包含四个项目的网格。通过将网格列间隙设置为0,我们消除了默认的间隙。然后,使用伪元素::after
来创建一个宽度为10px的白色竖线,它的位置相对于每个项目的右侧。通过设置伪元素的负右边距,我们将它部分隐藏在项目内部,实现了网格列间隙的效果。
你可以根据需要调整网格中的项目数量和样式。