html - 网格元素宽如太平洋

Question

我在使用网格时遇到问题:出于某种原因，列的宽度大约是我想要的宽度的 5 倍，而且无论我进行什么更改，它们之间的距离都保持完全相同。 HTML:

<div class=wrapper>
  <a href="A.html" id="A"></a>
  <a href="B.html" id="B"></a>
  <a href="C.html" id="C"></a>
</div>

和影响网格中图像链接的(相当长的)css:

.wrapper {
    display: -ms-grid;
    display: grid;
    grid-gap: 3%;
    -ms-grid-columns: 100% 3% 100% 3% 100% 3% 100% 3% 100%;
    -ms-grid-rows: 100% 5% 100%;
    grid-template-columns: 100% 100% 100% 100% 100%;
    grid-template-rows: 100% 100%;
    background-color: transparent;
    border: none;
    height: 100%;
    width: 100%;
    float: left;
    padding-left: 10%;
}

div.wrapper {
    background-color: transparent;
    border: none;
    height: 100%;
    width: 100%;
    float: left;
    padding-left: 10%;
}

.wrapper a {
    text-decoration: none;
    border-radius: 50%;
    margin-right: 4%;
    margin-left: 3%;
    margin-bottom: 5%;
    margin-top: 5%; 
    height: 0;
    width: 7%;
    padding-bottom: 7%;
    overflow: hidden;
    float: left;
}

#A {
    background: url('background.png') no-repeat;
    background-size: 100%;
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

在这个烂摊子里，我哪里搞砸了？

Answer 1

我认为，您的问题是 css % 单元使用了父级的高度和宽度。你有你的 .wrapper css 类，它在你的链接之间定义了一个大空间。正如您在问题的评论中提到的，如果您在 grid-template-columns 规则中将 100% 更改为类似 10% 的内容，它使链接更小。这是因为在你的 .wrapper a CSS 类中你给它一个 width 和一个 padding-bottom 的 7% 而且之前是靠大空间把链接变大的。如果 7% 增加或替换为 vw 或 px，它将使链接达到您想要的大小。