如何在网格中隐藏行边框

Question

我有一个包含链接和链接内部图像的网格。它不显示列边框，但显示行边框。如何删除行边框？

可以在此处找到一个有效的示例：http://lineeldor.no/home/mosaic

CSS ：

display: grid;
grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
grid-template-rows: auto;
border: 22px solid #282828;
background-color: #282828;

Answer 1

看一下您提供的示例，我注意到问题本身是网格项目没有设置高度。每个框内的图像都有一个max-width和一个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;
}

最终看起来像这样：

Answer 2

为了确定，我会在锚标记中添加margin:0; padding:0。但是...是否可以删除图像之后和之前的行返回？

我不知道为什么，但是历史上在HTML中应忽略的图片标签在引起此类问题后返回了行。

所以 <img... /></a>代替：

<img.../>
</a>

否则，您可以显式设置anchor的大小，然后使用top:0; right:0; bottom:0; left:0;将图像绝对定位在该标签内。“应”强制其忽略该间距，但也可能会拉伸图像