Элементы сетки такие же широкие, как Тихий океан

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, который определяет большое пространство между ссылками. Как вы упомянули в комментариях к вашему вопросу, если вы измените 100% на что-то вроде 10% в правиле grid-template-columns, это сделает ссылки намного меньше. Это потому, что в вашем классе .wrapper a css вы даете ему width и padding-bottom из 7%, и он полагался на большое пространство, чтобы увеличить ссылку раньше. Если 7% был увеличен или заменен на vw или px, ссылки получатся в нужном вам размере.