Masonry Layout With Masonry

<h1 class="mt-6 mx-4 mb-6 text-xl">Example with Masonry</h1>

<style>
    .grid-item {
        width: 300px;
    }

    .grid-item--width2 {
        width: 400px;
    }

    .grid-item {
        margin-bottom: 10px;
    }
</style>

<div class="grid mt-12 py-2 sm:py-4 mx-auto">

    <a class="grid-item group" href="#">
        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Events
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Hike for Hospice</h3>
            <p class="text-white opacity-75">Sunday, May 2, 2021</p>
        </div>
    </a>

    <a class="grid-item group" href="#">

        <img class="lazyload object-cover w-full mx-auto" src="https://source.unsplash.com/random/300x200" alt="Random Image">

        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Volunteer
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Palliative Support Volunteer</h3>
            <p class="text-white opacity-75">Stettler Hospice Society is recruiting volunteers to provide palliative
                support.</p>
        </div>
    </a>

    <a class="grid-item group" href="#">
        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Events
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Hike for Hospice</h3>
            <p class="text-white opacity-75">Sunday, May 2, 2021</p>
        </div>
    </a>

    <a class="grid-item group" href="#">
        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Events
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Hike for Hospice</h3>
            <p class="text-white opacity-75">Sunday, May 2, 2021</p>
        </div>
    </a>

    <a class="grid-item group" href="#">
        <img class="lazyload object-cover w-full mx-auto" src="https://source.unsplash.com/random/300x200" alt="Random Image">

        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Volunteer
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Palliative Support Volunteer</h3>
            <p class="text-white opacity-75">Stettler Hospice Society is recruiting volunteers to provide palliative
                support.</p>
        </div>
    </a>

    <a class="grid-item group" href="#">
        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Events
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Hike for Hospice</h3>
            <p class="text-white opacity-75">Sunday, May 2, 2021</p>
        </div>
    </a>

    <a class="grid-item group" href="#">
        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Events
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Hike for Hospice</h3>
            <p class="text-white opacity-75">Sunday, May 2, 2021</p>
        </div>
    </a>

    <a class="grid-item group" href="#">
        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Volunteer
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Palliative Support Volunteer</h3>
            <p class="text-white opacity-75">Stettler Hospice Society is recruiting volunteers to provide palliative
                support.</p>
        </div>
    </a>

    <a class="grid-item group" href="#">
        <div class="flex flex-col h-full px-6 py-4 sm:py-6 bg-blue-700 shadow-xl rounded transition-transform duration-100 transform group-hover:-translate-y-1">
            <div class="sm:mb-1 text-xs uppercase text-white opacity-75">
                Events
            </div>
            <h3 class="text-white text-xl leading-tight mb-1">Hike for Hospice</h3>
            <p class="text-white opacity-75">Sunday, May 2, 2021</p>
        </div>
    </a>

</div>

<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>

<script>
    var grid = document.querySelector('.grid');
    var msnry;
    imagesLoaded(grid, function() {
        // init Isotope after all images have loaded
        msnry = new Masonry(grid, {
            itemSelector: '.grid-item',
            // columnWidth: '.grid-sizer',
            // percentPosition: true
            columnWidth: 300,
            gutter: 10
        });
    });
</script>