Masonry Grid Style 4

HTML

<div class="masonry-container">
            <div class="masonry-wrapper">
                <!-- The masonry Grid contains 3 columns in desktop and 2 in tab + Mob. Hence images from column 3 will combine into column 1 retaining the sizes according to the mobile design of column 1.  -->
        
                <!-- The grids will be Sets of 3 (Big, Medium, Small) so its easy to understand and copy for new grids and sets (the sets will be used only to understand the arrangement) -->
        
                
        
                <!-- Medium card -->
                <div class="masonry-card">
                    <a href="https://images.unsplash.com/photo-1700224960039-4c8f392e1aee?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        data-lightbox="masonry-link" class="masonry-link">
                        
                        <div class="masonry-image">
                            <img class="dsk-medium mb-medium"
                                src="https://images.unsplash.com/photo-1700224960039-4c8f392e1aee?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="">
                        </div>
                    </a>
                </div>
        
                <!-- Big Card -->
                <div class="masonry-card">
                    <a href="https://images.unsplash.com/photo-1682687220067-dced9a881b56?q=80&w=1975&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        data-lightbox="masonry-link" class="masonry-link">
                        
                        <div class="masonry-image">
                            <img class="dsk-big mb-big"
                                src="https://images.unsplash.com/photo-1682687220067-dced9a881b56?q=80&w=1975&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="">
                        </div>
                    </a>
                </div>
        
                <!-- Small Card-->
                <div class="masonry-card">
                    <a href="https://images.unsplash.com/photo-1682687220247-9f786e34d472?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        data-lightbox="masonry-link" class="masonry-link">
                        
                        <div class="masonry-image">
                            <img class="dsk-small mb-small"
                                src="https://images.unsplash.com/photo-1682687220247-9f786e34d472?q=80&w=1965&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="">
                        </div>
                    </a>
                </div>
        
        
                <!-- Big Card -->
                <div class="masonry-card">
                    <a href="https://images.unsplash.com/photo-1682695795798-1b31ea040caf?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        data-lightbox="masonry-link" class="masonry-link">
                        
                        <div class="masonry-image">
                            <img class="dsk-big mb-big"
                                src="https://images.unsplash.com/photo-1682695795798-1b31ea040caf?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="">
                        </div>
                    </a>
                </div>
        
                <!-- XL Card -->
                <div class="masonry-card">
                    <a href="https://images.unsplash.com/photo-1699488169253-3e6dfa960947?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        data-lightbox="masonry-link" class="masonry-link">
                        
                        <div class="masonry-image">
                            <img class="dsk-xl mb-xl"
                                src="https://images.unsplash.com/photo-1699488169253-3e6dfa960947?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="">
                        </div>
                    </a>
                </div>
        
                <!-- Small Card -->
                <div class="masonry-card">
                    <a href="https://images.unsplash.com/photo-1700049749697-63beefb4915e?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        data-lightbox="masonry-link" class="masonry-link">
                        
                        <div class="masonry-image">
                            <img class="dsk-small mb-small"
                                src="https://images.unsplash.com/photo-1700049749697-63beefb4915e?q=80&w=2012&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="">
                        </div>
                    </a>
                </div>
        
                <!-- XL Card -->
                <div class="masonry-card">
                    <a href="https://images.unsplash.com/photo-1700319514512-1bcb679e04ab?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        data-lightbox="masonry-link" class="masonry-link">
                        
                        <div class="masonry-image">
                            <img class="dsk-xl mb-xl"
                                src="https://images.unsplash.com/photo-1700319514512-1bcb679e04ab?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="">
                        </div>
                    </a>
                </div>
        
                <!-- Small Card -->
                <div class="masonry-card">
                    <a href="https://images.unsplash.com/photo-1700248123701-085cdc5c3e83?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        data-lightbox="masonry-link" class="masonry-link">
                        
                        <div class="masonry-image">
                            <img class="dsk-small mb-small"
                                src="https://images.unsplash.com/photo-1700248123701-085cdc5c3e83?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="">
                        </div>
                    </a>
                </div>
        
        
                <!-- Medium Card -->
                <div class="masonry-card">
                    <a href="https://images.unsplash.com/photo-1700366232028-d64ab5f6c3a8?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        data-lightbox="masonry-link" class="masonry-link">
                        
                        <div class="masonry-image">
                            <img class="dsk-medium mb-medium"
                                src="https://images.unsplash.com/photo-1700366232028-d64ab5f6c3a8?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="">
                        </div>
                    </a>
                </div>
        
                <!-- Medium Card -->
                <div class="masonry-card">
                    <a href="https://images.unsplash.com/photo-1700410426386-704d39c87828?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        data-lightbox="masonry-link" class="masonry-link">
                        
                        <div class="masonry-image">
                            <img class="dsk-medium mb-medium"
                                src="https://images.unsplash.com/photo-1700410426386-704d39c87828?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="">
                        </div>
                    </a>
                </div>
        
                <!-- Small Card -->
                <div class="masonry-card">
                    <a href="https://images.unsplash.com/photo-1682687982502-1529b3b33f85?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        data-lightbox="masonry-link" class="masonry-link">
                        
                        <div class="masonry-image">
                            <img class="dsk-small mb-small"
                                src="https://images.unsplash.com/photo-1682687982502-1529b3b33f85?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="">
                        </div>
                    </a>
                </div>
        
                <!-- Big Card    -->
                <div class="masonry-card">
                    <a href="https://images.unsplash.com/photo-1700463975226-32ba9dac86b3?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                        data-lightbox="masonry-link" class="masonry-link">
                        
                        <div class="masonry-image">
                            <img class="dsk-big mb-big"
                                src="https://images.unsplash.com/photo-1700463975226-32ba9dac86b3?q=80&w=1976&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                alt="">
                        </div>
                    </a>
                </div>
            </div>
        </div>

CSS

.masonry-container {
    max-width: 1320px;
    margin: auto;
}

.masonry-wrapper {
    columns: 3;
    column-gap: 0px;
    padding: 25px;
    max-width: 1000px;
    margin: auto;
}

.masonry-link {
    text-decoration: none;
    overflow: hidden;
}

.masonry-card {
    width: 350px;
    position: relative;
    top: 0px;
    left: 0px;
    padding-block: 25px;
    transition: 0.5s;
}
.masonry-image {
    display: flex;
}
.masonry-card img {
    width: 80%;
    margin: auto;
    object-fit: cover;
    padding: 7px;
    border-radius: 1000px;
    transition: 0.4s;
    border: 1px solid white;
    box-shadow: 0px 0px 24px #00000063;
}
.dsk-xl{
    height: 550px;
}
.dsk-big {
    height: 550px;
}

.dsk-medium {
    height: 420px;
}

.dsk-small {
    height: 200px;
}

.lightbox .lb-image,
.lb-outerContainer {
    border-radius: 20px;
}

.lightbox {
    display: flex;
    flex-direction: column-reverse;
}

.lb-dataContainer {
    margin: 10px auto;
}

@media (max-width:820px) {
    .masonry-wrapper{
        max-width: 730px;
    }
    .masonry-card{
        width: 230px;
    }
    .masonry-card img{
        width: 75%
    }
    .dsk-xl {
        height: 370px;
    }
    .dsk-big {
        height: 300px;
    }

    .dsk-medium {
        height: 245px;
    }

    .dsk-small {
        height: 120px;
    }

    .lb-nav a.lb-prev {
        opacity: 1;
    }

    .lb-nav a.lb-next {
        opacity: 1;
    }
}

@media (max-width:600px) {
    .masonry-card {
        width: 170px;
        padding-block: 15px;
    }
    .masonry-wrapper {
        columns: 2;
    }
    .mb-big {
        height: 250px;
    }
    .mb-small {
        height: 90px;
    }
    .mb-xl{
        height: 340px;
    }
    .mb-medium{
        height: 175px;
    }
}

@media (max-width:360px){
    .masonry-wrapper{
        padding: 0;
    }
}
/* comment  */

Links

    <!-- font-Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
        rel="stylesheet">
    <!-- lightbox -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css"
        integrity="sha512-ZKX+BvQihRJPA8CROKBhDNvoc2aDMOdAlcm7TUQY+35XYtrd3yh95QOOhsPDQY9QnKE0Wqag9y38OIgEvb88cA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

Scripts

<!-- Jquery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        
        <!-- lightbox script -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"
            integrity="sha512-Ixzuzfxv1EqafeQlTCufWfaC6ful6WFqIz4G+dWvK0beHw0NVJwvCKSgafpy5gwNqKmgUfIBraVwkKI+Cz0SEQ=="
            crossorigin="anonymous" referrerpolicy="no-referrer"></script>