How to create a responsive popup gallery?

Step one – HTML Markup:

<div class="container mt-5 mb-4">
    <div class="row popup-gallery">
        <div class="col-lg-4 col-md-6 mb-4">
            <a href="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-1.jpg">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-1.jpg" class="img-fluid">
            </a>
        </div>
        
        <div class="col-lg-4 col-md-6 mb-4">
            <a href="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-2.jpg">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-2.jpg" class="img-fluid">
            </a>
        </div>
        
        <div class="col-lg-4 col-md-6 mb-4">
            <a href="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-3.jpg">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-3.jpg" class="img-fluid">
            </a>
        </div>
        
        <div class="col-lg-4 col-md-6 mb-4">
            <a href="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-4.jpg">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-4.jpg" class="img-fluid">
            </a>
        </div>
        
        <div class="col-lg-4 col-md-6 mb-4">
            <a href="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-5.jpg">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-5.jpg" class="img-fluid">
            </a>
        </div>
        
        <div class="col-lg-4 col-md-6 mb-4">
            <a href="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-6.jpg">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-6.jpg" class="img-fluid">
            </a>
        </div>
        
        <div class="col-lg-4 col-md-6 mb-4">
            <a href="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-7.jpg">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-7.jpg" class="img-fluid">
            </a>
        </div>
        
        <div class="col-lg-4 col-md-6 mb-4">
            <a href="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-8.jpg">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-8.jpg" class="img-fluid">
            </a>
        </div>
        
        <div class="col-lg-4 col-md-6 mb-4">
            <a href="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-9.jpg">
                <img src="https://techsolutionshere.com/wp-content/uploads/2019/05/gallery-9.jpg" class="img-fluid">
            </a>
        </div>
    </div>
</div>

Step Two- CSS:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<style>
body {
    background-color: #fafafa;
}
</style>

Step Three- JavaScript:

<!-- Optional JavaScript -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<script>
$(document).ready(function() {
    $('.popup-gallery').magnificPopup({
        delegate: 'a',
        type: 'image',
        tLoading: 'Loading image #%curr%...',
        mainClass: 'mfp-img-mobile',
        gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1] // Will preload 0 - before current, and 1 after the current image
        },
        image: {
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
            titleSrc: function(item) {
                return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
            }
        }
    });
});
</script>

And more details Magnific Popup