Search code examples
htmlcsscss-grid

Unwanted extra border-right on the right of grid

I'm trying to add a border-right to each photos in my grid so that it will appear between the two photos like on the image. But for some reason there's a big extra unwanted border that appear on the right of the page. Not sure how I can get rid of it. Any help would be very much appreciated. https://jsfiddle.net/5a3t1hwx/ border

<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);
        }
    }
Solution

  • First things first, catch and fix bugs in your jsfiddle.

    1. Delete all your CSS code in the HTML file. Use the separated CSS code.
    2. Add close bracket ( } ) to your .item:hover.

    And then, the solution to your problem:

    1. Change position: fixed; on all of your .item:nth-child(x):after to position: absolute;
    2. Add position: relative; to your .item