Why is my website's grid collapsing the first time it's loaded?

Question

I'm sorry for dropping so much code here, but I've been playing with this for over a week and I just can't figure it out.

So I am working on my personal website, and the problem is that the images in the the body's grid system overlap sometimes on the first load of the site. If you refresh it, it seems to work ok (most of the time). You can try yourself: tylerteacher.com . The strange thing is that the site works in the compatibility viewers in chrome and firefox.

I have tried adding margins and using the 'space-between' function in the css. I have double checked the html to make sure everything is properly linked to the css page, and I have also played with Javascript page and the slides per view functions.

I really appreciate the help!

let toggle = document.querySelector("#header .toggle-button");
let collapse = document.querySelectorAll("#header .collapse");

toggle.addEventListener('click' , function(){
    collapse.forEach(col => col.classList.toggle("collapse-toggle"));
})

// with masonry
new Masonry("#posts .grid", {
    itemSelector : '.grid-item',
    gutter : 20
});

// swiper libray initialization
new Swiper('.swiper-container', {
    direction : 'horizontal',
    loop : true,
    slidesPerView : 6,
    autoplay : {
        delay : 0
    },
    // responsive breakpoints
    breakpoints : {
        '@0' : {
            slidesPerView : 2

        },
        // 888px
        '@1.00' : {
            slidesPerView : 3
        },
        // 1110px
        '@1.25' : {
            slidesPerView : 4
        },
        // 1330px
        '@1.50' : {
            slidesPerView: 5
        }
    }
})

// Sticky Navigation
window.onscroll = function(){ myFunction()};

// get the current value 
let navbar = document.getElementById("header");

// get the navbar position
let sticky = navbar.offsetTop;

// sticky function
function myFunction(){
    if(window.pageYOffset >= sticky){
        navbar.classList.add("sticky");
    }else{
        navbar.classList.remove("sticky");
    }
}

@import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Poppins&family=Roboto&display=swap');

/* root styling */

:root{
    --light : #f8f9fa;
    --secondary: #adb5bd;
    --dark: #343a40;
    --primary-color: #f15bb5;
    --secondary-color: #2ec4b6;
    --border : #e9ecef;
}

body{
    font-family: 'Roboto', sans-serif;
    padding: 0;
    margin: 0;
}

a{
    text-decoration: none;
    
}

* > *{
    box-sizing: border-box;
}

/* global styling */
.text-light{
    color: var(--light);
}

.text-secondary{
    color: var(--secondary);
}

.text-dark{
    color: var(--dark);
}

.text-primary{
    color: var(--primary-color);
}

.bg-light{
    background-color: var(--light);
}

.container{
    max-width: 1200px;
    padding: 0 15px;
    margin: auto;
}

.img-fluid{
    width: 100%;
}

.text-title{
    font-family: 'DM Sans', sans-serif;
    font-weight: bold;
}

.secondary-title{
    font-family: 'Poppins' , sans-serif;
}

.display-1{
    font-size: 22px;
}

.display-2{
    font-size: 16px;
}

.display-3{
    font-size: 14px;
}

.text-center{
    text-align: center;
}

.text-right{
    text-align: right;
}

.btn{
    padding: 15px 20px;
    border: none;
}

.btn-primary{
    border-radius: 4px;
    background-color: var(--secondary-color);
}

.object-fit{
    max-height: 120px;
    height: 80px;
    width: 80px;
    object-fit: fill;
    justify-content: space-between;
}

.d-flex{
    display: flex;   
}

.flex-wrap{
    flex-wrap: wrap;
}

.justify-content-center{
    justify-content: center;
}

.justify-content-between{
    justify-content: space-between;
}

.mt-2{
    margin-top: 10px;
}

.mt-3{
    margin-top: 50px;
}

.mb-3{
    margin-bottom: 30px;
}

.m-0{
    margin: 0;
}

.px-1{
    padding-left: 5px;
    padding-right: 5px;
}

.px-2{
    padding-left: 20px;
    padding-right: 20px;
}

.py-1{
    padding-top: 10px;
    padding-bottom: 10px;
}

.py-2{
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-3{
    padding-top: 30px;
    padding-bottom: 30px;
}

.thumbnail{
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.rounded{
    height: 120px;
    width: 120px;
    object-fit: fill;
    border-radius: 99px;
}

.shadow{
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}


/* section styling */
 
/* ------- Navigation Menu ---------- */
.navbar{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
}

.nav-brand{
    font-family: 'DM Sans', sans-serif;
    font-weight: bold;
    align-self: center;
    font-size: 32px;
}

.collapse{
    align-self: center;
}

.nav-link{
    font-size: 18px;
    margin: 12px;
    color: var(--dark);
    font-family: 'Poppins', sans-serif;
}

.nav-link:hover{
    color: var(--primary-color);
}

.search-box{
    display: inline;
    border-right: 1px solid var(--secondary);
    padding-right: 12px;
    margin-right: 10px;
}

.toggle-button{
    font-size: 21px;
    background-color: transparent;
    border: none;
    position: absolute;
    right: 0;
    margin: 8px 10px;
    display: none;
}

.toggle-button:focus{
    outline: none;
}


/* ------- .Navigation Menu ---------- */

/* ----------- Main Section ---------- */

#site-main{
    margin-top: 4em;
}

#posts{
    margin-bottom: 5em;
    
}

.grid{
    margin: 1 auto;
    row-gap: 20px;
}

.grid .grid-item{
    width: calc(33.3333% - 20px);
    margin-bottom: 3em;
    
}



/* ----------- .Main Section ---------- */


/* ----------- sticky ------- */

.sticky{
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
}

.sticky + .content{
    padding-top: 60px;
}

/* ----------- .sticky ------- */



/* Media Query */

.row{
    display: flex;
    
}

.col-3{
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    padding-right: 35px;
}

.col-8{
    flex: 0 0 70%;
    max-width: 70%;
}

.col-4{
    flex: 0 0 30%;
    max-width: 30%;
}

@media (max-width : 1024px){
    .row{
       flex-wrap: wrap;
    }

    .col-3{
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-8{
        flex: 0 0 100%;
        max-width: 100%;
    }

    .col-4{
        flex: 0 0 100%;
        max-width: 100%;
    }

}


@media (max-width : 992px){
    .navbar{
        flex-direction: column;
    }

    #site-main{
        margin-top: 14em;
    }

}

@media (max-width : 768px){
    .grid .grid-item{
        width: calc(50% - 20px);
        border-top: 1px solid #dfdfdf;
        

    }

    .col-3{
        flex: 0 0 100%;
        max-width: calc(100% - 50px);
        padding-top: 40px;
    }
}

@media (max-width : 574px){
    .toggle-button{
        display: initial;
    }

    .collapse{
        max-height: 0;
        overflow: hidden;
        transition: all 0.8s cubic-bezier(0.51,-0.15, 0, 0.98);
    }

    .collapse .nav-link{
        display: block;
        text-align: center;
    }

    .search-box{
        border-right: none;
    }

    .collapse-toggle{
        max-height: 500px;
    }

    .grid .grid-item{
        width: calc(100% - 20px);
        border-top: 1px solid #dfdfdf;
        
    }

    #site-main{
        margin-top: 6em;
        justify-content: space-around;
    }

}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TylerTeacher</title>

    <!-- font awesome icons cdn -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
        integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w=="
        crossorigin="anonymous" />

    <!-- swiper slider css file -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.css"
        integrity="sha512-m3pAvNriL711NMlhkZHK6K4Tu2/RjtrzyjxZU8mlAbxxoDoURy27KajN1LGTLeEEPvaN12mKAgSCrYEwF9y0jA=="
        crossorigin="anonymous" />

    <!-- custom style.css file -->
    <link rel="stylesheet" href="style.css">





</head>

<body>

    <!-- Header -->
    <header id="header" class="shadow bg-light">
        <nav class="container navbar">
            <a href="/index.html" class="nav-brand text-dark">
                TylerTeacher
            </a>

            <!-- toggle button -->
            <button class="toggle-button">
                <span><i class="fas fa-bars"></i></span>
            </button>

            <!-- collapse on toggle button click -->
            <div class="collapse">
                <ul class="navbar-nav">
                    <a href="#" class="nav-link">Home</a>
                    <a href="#" class="nav-link">Resources</a>
                    <a href="#" class="nav-link">Classes</a>
                    <a href="#" class="nav-link">Testimonials</a>
                    <a href="#" class="nav-link">Contact</a>
                </ul>
            </div>

            <!-- collapse on toggle button click -->
            <div class="collapse">
                <ul class="navbar-nav">
                    <div class="search-box">
                        <a href="#" class="nav-link"><i class="fas fa-search"></i></a>
                    </div>
                    <a href="#" class="nav-link"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="https://www.youtube.com/channel/UCDN9p8e-UAaPxtzfoVJnLMw"><i
                            class="fab fa-youtube"></i></a>
                    <a href="https://www.instagram.com/tyler.s.teacher/" class="nav-link"><i
                            class="fab fa-instagram"></i></a>
                    <a href="#" class="nav-link"><i class="fab fa-tiktok"></i></a>
                </ul>
            </div>
        </nav>
    </header>
    <!-- .Header -->
    <!--main site-->
    <main id="site-main">

        <!-- Blog Post Section -->
        <section id="posts">
            <div class="container">
                <div class="grid">

                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin:auto">
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/inspirational-word_EXZZBXPUS6.jpg" class="img-fluid" alt="">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        Welcome to TylerTeacher.com
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around; ">
                            <div class="card" style="margin: auto">
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/grandmother-1822560_960_720.jpg" class="img-fluid" alt="">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        Why online education is the future
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin: auto" >
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/inspirational-word_EXZZBXPUS6.jpg" class="img-fluid" alt="">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        How to overcome language anxiety
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin: auto">
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/laptop-red-cup-coffee-notebook-pen-satchel-freephotoscc-thumb-2.jpg"
                                            class="img-fluid" alt="Responsive image">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        Podcasts are a great tool for language learners
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin: auto" >
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/man_studying_online.jpg" class="img-fluid"
                                            alt="Responsive image">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        What makes some people better at learning languages?
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin: auto">
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/negative-space-picnic-city-river-sunset-ben-duchac-thumb-1.jpg"
                                            class="img-fluid" alt="Responsive image">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        Tips for becoming a more confident communicator in English
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin: auto">
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/listen-1702648_960_720.jpg" class="img-fluid"
                                            alt="Responsive image">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        How listening can make you better at speaking English
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin: auto">
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/Man_studying.jpg" class="img-fluid" alt="Responsive image">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        How to use online classes effectively
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                    <!-- article -->
                    <div class="grid-item">
                        <article class="article" style="justify-content: space-around">
                            <div class="card" style="margin:auto">
                                <div class="overflow-img">
                                    <a href="#">
                                        <img src="./Assets/education_tiles.jpg" class="img-fluid"
                                            alt="Responsive image">
                                    </a>
                                </div>
                                <div class="card-body text-center px-1">
                                    <a href="#" class="text-title display-1 text-dark">
                                        Coming soon
                                    </a>
                                    <p class="secondary-title text-secondary display-3">
                                        <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                                        <span><i class="far fa-comments text-primary"></i> 12</span>
                                    </p>
                                </div>
                            </div>
                        </article>
                    </div>
                    <!-- .article -->
                </div>

                <div class="text-center">
                    <button class="btn btn-primary secondary-title text-light">Load More Posts...</button>
                </div>
            </div>
        </section>
        <!-- .Blog Post Section -->

        

        <!-- masonry libray for horizontal grid -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
            integrity="sha512-JRlcvSZAXT8+5SQQAvklXGJuxXTouyq8oIMaYERZQasB8SBDHZaUbeASsJWpk0UUrf89DP3/aefPPrlMR1h1yQ=="
            crossorigin="anonymous"></script>

        <!-- swiper slider cdn -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.5/swiper-bundle.min.js"
            integrity="sha512-1LlEYE0qExJ/GUfAJ0k2K2fB5sIvMv/q6ueo3syohvQ3ElWDQVSMUOf39cxaDWHtNu7M6lF6ZC1H6A1m3SvheA=="
            crossorigin="anonymous"></script>

        <!-- custom javascript main.js file -->
        <script src="main.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>


</body>

</html>

Answer 1

It is caused by the Masonry. You have to let the page finish loading before you initialize it. This worked for me

window.addEventListener('load', function(){
    new Masonry("#posts .grid", {
        itemSelector : '.grid-item',
        gutter : 20
    });
    // remove preload if added
});

Optional: Whiles the page loads, you can add a preloader to hide the page's disorganised stucture.

Answer 2

What you're experiencing is due to the Masonry script calculating the dimensions of the grid based on its content. While loading the page your images don't have a width and height because the browser doesn't know what they look like. Masonry doesn't wait and will render your grid anyway.

A fix for this is to let the browser know in advance what the dimensions of the image will be. You can do this by adding a width and height attribute to your img tag containing the width and height in pixels.

<img src="your-image.jpg" class="img-fluid" width="480" height="720" alt="" />

Alternatively you could wait for all images in your grid to load before initializing the Masonry script.

// Loads a single image.
const loadImage = src => new Promise(resolve => {
  const image = new Image();
  image.onload = () => resolve();
  image.src = src;
});

// Get the container with all images.
// Loop over each image and wait for all of them to load.
async function allImagesLoaded(selector) {
  const container = document.querySelector(selector);
  if (container === null) {
    return;
  }

  const images = container.querySelectorAll('img');
  return Promise.all([...images].map(
    src => loadImage(src)
  ));
}

// Load all images inside #posts .grid.
allImagesLoaded('#posts .grid').then(() => {
  new Masonry("#posts .grid", {
    itemSelector : '.grid-item',
    gutter : 20
  });
});