如何在网格中隐藏行边框

看一下您提供的示例,我注意到问题本身是网格项没有设置的高度;每个框中的图像都有一个 max-width 和A width 设置,这样它会在框的底部留下一些空间,使其看起来像一个边框。

我发现的一个解决方案是在网格项上设置最大高度,这样它们就不会创建超过需要的空间。

在网格容器本身上,我为每一行设置一个高度。

section.mosaic {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(128px,1fr));
    grid-template-rows: 137px;
    border: 22px solid #282828;
    background-color: #282828;
}

以及每个锚标记。

a.item {
    max-height: 137px;
}

最后看起来像这样:

我会补充 margin:0; padding:0 去锚定标签只是为了确定。但是…可以吗 删除图像之后和之前的行返回 ?

我不知道为什么,但是在HTML中应该忽略的图像标记后面的行返回在历史上引起了这样的问题。

所以 <img... /></a> 而不是:

<img.../>
</a>

否则,可以显式设置 anchor 然后用 top:0; right:0; bottom:0; left:0; 这“应该”迫使它忽略这个间距,但它也可能稍微拉伸图像。