html - 网格右侧不需要的额外边框

Question

我正在尝试为我的网格中的每张照片添加一个 border-right，这样它就会出现在两张照片之间，就像在图像上一样。但由于某种原因，页面右侧出现了一个不需要的大边框。不知道我怎样才能摆脱它。任何帮助将不胜感激。 https://jsfiddle.net/5a3t1hwx/

<div class="wrapper">
    <div class="item" id="1"> <img src="https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60"/></div>
    <div class="item" id="2"> <img src="https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60" /></div>
    <div class="item" id="1"> <img src="https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60" /></div>
    <div class="item" id="2"> <img src="https://images.unsplash.com/photo-1502759683299-cdcd6974244f?auto=format&fit=crop&w=440&h=220&q=60" /></div>
</div>


    .wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-gap: 0px;
        align-items: stretch;
        padding: 0px 0px 0;
        margin: 0px;
        max-width: 100%;
        position: absolute;
    }

            .item:hover {
            transform: translateY(100px);
            transition: .9s ease;



    .item {
        border: 0px solid #ccc;
        max-width: 100%;
            height: 100%;
                padding: 0px 0px 0;
        margin: -5px;
         display: grid;
        border-right: solid rgba(158,176,180,.1);
        transition: all .75s cubic-bezier(.455,.03,.515,.955);

           display: inline-block;
        transition-duration: $defaultDuration;
        transition-property: transform;

        @include hideTapHighlightColor();
        @include hardwareAccel();
        @include improveAntiAlias();
    }




        .item:nth-child(4n):after {
            content: "";
            position: fixed;
            right: 0;
            z-index: 100;
            top: 40px;
            width: 6px;
            height: 80px;
            background-color: #E8143C;
        }

        .item:nth-child(4n-1):after {
            content: "";
            position: fixed;
            right: 0;
            z-index: 100;
            bottom: 40px;
            width: 6px;
            height: 80px;
            background-color: #E8143C;
        }

        .item:nth-child(4n-2):after {
            content: "";
            position: fixed;
            right: 0;
            z-index: 100;
            top: 40px;
            width: 6px;
            height: 80px;
            background-color: #E8143C;
        }

        .item:nth-child(4n-3):after {
            content: "";
            position: fixed;
            right: 0;
            z-index: 100;
            bottom: 40px;
            width: 6px;
            height: 80px;
            background-color: #E8143C;
        }





    /* Screen larger than 600px? 2 column */
    @media (min-width: 500px) {
        .wrapper {
            grid-template-columns: repeat(1, 1fr);
        }
    }

    /* Screen larger than 600px? 2 column */
    @media (min-width: 600px) {
        .wrapper {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    /* Screen larger than 900px? 3 columns */
    @media (min-width: 900px) {
        .wrapper {
            grid-template-columns: repeat(4, 1fr);
        }
    }

Answer 1

首先，捕获并修复您的 jsfiddle 中的错误。

1. 删除 HTML 文件中的所有 CSS 代码。使用分离的 CSS 代码。
2. 将右括号 ( } ) 添加到您的.item:hover。

---

然后，您的问题的解决方案:

1. 改变 position: fixed; 在你的所有 .item:nth-child(x):after 到 position: absolute;
2. 将 position: relative; 添加到您的 .item