Html 网格元素与太平洋一样宽

我对网格有一个问题：出于某种原因，这些列的宽度大约是我想要的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

css类，它在链接之间定义了一个很大的空间。正如您在问题的评论中提到的，如果您在

网格模板列

规则中将

100%

更改为类似

10%

的内容，则会使链接变得更小。这是因为在你的

.wrapper一个
css类中，你给它一个
宽度和
填充底部
的
7%
，它以前是依靠大空间来增大链接的。如果
7%
被增加或替换为
vw
或
px
将使链接达到您想要的大小。
与网格浮动？为什么要在列模板上增加5倍100%。。你想要实现什么？我正在尝试制作一行图像链接。我把它们改成了10%，它所做的只是缩小了链接的大小：（Float是之前的遗留物，但是去掉它不会改变我所看到的任何东西，所以我一直忽略它，就像slob I am一样。这个问题的标题很有诗意
.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;
}