在网格一端增加网格间隙

Question

我不知道为什么，但我的网格间隙被添加到我的网格的右侧，两次。这不应该是典型的使用%的问题，因为我使用的是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.