Промежуток сетки добавляется к одному концу сетки

Question

Я не уверен, почему, но мой промежуток сетки добавляется к правой стороне моей сетки дважды. Это не должно быть classi c using% problem, поскольку я использую fr, а в инструментах разработчика я вижу добавление двух пробелов в сетке. Кто-нибудь знает, почему это происходит?

    .Portfolio .wrapper{
    grid-gap:10px;
    padding:40px 0px;
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(5,1fr) ;
    grid-auto-rows: 200px;
    grid-template-areas: 
        "img-30 img-30 img-30 img-31 img-31"
        "img-30 img-30 img-30 img-31 img-31"
        "img-35 img-35 img-34 img-34 img-34"
        "img-35 img-35 img-34 img-34 img-34"
        "img-36 img-36 img-36 img-32 img-32"
        "img-36 img-36 img-36 img-32 img-32"

;
}
.Portfolio .wrapper >*{
    background-position: center;
    background-size: cover;
    cursor: pointer;
}
.Portfolio .wrapper .img-30{
    background-image: url("Images/30.jpg");
    grid-area: img-30;

} 
.Portfolio .wrapper .img-31{
    background-image: url("Images/31.jpg");
    grid-area: img-31;

} 
.Portfolio .wrapper .img-32{
    background-image: url("Images/32.jpg");
    grid-area: img-32;
} 
.Portfolio .wrapper .img-33{
    background-image: url("Images/33.jpg");
    grid-area: img-33;
} 
.Portfolio .wrapper .img-34{
    background-image: url("Images/34.jpg");
    grid-area: img-34;
} 
.Portfolio .wrapper .img-35{
    background-image: url("Images/35.jpg");
    grid-area: img-35;
    background-color: red;
} 
.Portfolio .wrapper .img-36{
    background-image: url("Images/36.jpg");
    grid-area: img-36;
} 


<main class="Portfolio">
    <div class="wrapper">
        <div class="img-30"></div>
        <div class="img-31"></div>
        <div class="img-32"></div>
        <div class="img-33"></div>
        <div class="img-34"></div>
        <div class="img-35"></div>
        <div class="img-36"></div>
    </div>

Вот мой HTML - ПРИМЕЧАНИЕ !! он говорит повторение (3,1fr), но на самом деле повторяется (5,1fr)

Answer 1

Вы не использовали .img-33 в своем grid-template-areas:. У меня работает следующий код:

CSS:

    .Portfolio .wrapper{
    grid-gap:10px;
    padding:40px 0px;
    width: 95%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(5,1fr) ;
    grid-auto-rows: 200px;
    grid-template-areas: 
        "img-30 img-30 img-30 img-31 img-31"
        "img-30 img-30 img-30 img-31 img-31"
        "img-35 img-35 img-34 img-34 img-34"
        "img-35 img-35 img-34 img-34 img-34"
        "img-36 img-36 img-36 img-32 img-32"
        "img-36 img-36 img-36 img-32 img-32"
        "img-33 img-33 img-33 img-33 img-33";
}
.Portfolio .wrapper > * {
    background-position: center;
    background-size: cover;
    cursor: pointer;
}
.Portfolio .wrapper .img-30{
    background: blue;
    grid-area: img-30;

} 
.Portfolio .wrapper .img-31{
    background: green;
    grid-area: img-31;

} 
.Portfolio .wrapper .img-32{
    background: cyan;
    grid-area: img-32;
} 
.Portfolio .wrapper .img-33{
    background: purple;
    grid-area: img-33;
} 
.Portfolio .wrapper .img-34{
    background: pink;
    grid-area: img-34;
} 
.Portfolio .wrapper .img-35{
    background: orange;
    grid-area: img-35;
    background-color: red;
} 
.Portfolio .wrapper .img-36{
    background: yellow;
    grid-area: img-36;
} 

HTML:

<main class="Portfolio">
    <div class="wrapper">
        <div class="img-30">30</div>
        <div class="img-31">31</div>
        <div class="img-32">32</div>
        <div class="img-33">33</div>
        <div class="img-34">34</div>
        <div class="img-35">35</div>
        <div class="img-36">36</div>
    </div>
</main>

Проверьте эту демонстрацию: JSfiddle .