CODEWITHSUNDEEP
htmljquerycssjquery-isotopemasonry
Thinura Dinujaya
Thinura Dinujaya

Reputation: 1

Masonry.js Alignment issue

In my masonry.js and isotope.js gallery, there is a small gap in right side. I need to know how can fix it? As you can see in the image there is gap difference in right side and left side.

my js code:

$(document).ready(function () {
    // Initialize Masonry
    $('.gallery').masonry({
        itemSelector: '.gallery-item',
        columnWidth: '.gallery-item',
        fitWidth: true
    });

    // Initialize Isotope (for filtering)
    var $grid = $('.gallery').isotope({
        itemSelector: '.gallery-item',
        layoutMode: 'masonry'
    });

    // Filter items when filter button is clicked
    $('.filter-btn').on('click', function () {
        var filterValue = $(this).attr('data-filter');
        $grid.isotope({ filter: filterValue });
    });
});

my css:

.gallery {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  padding: 5px;
  display: grid;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

Preview

I tried different methods to fix this but I got no luck. Thanks in advance!

Upvotes: 0

Views: 28

Answers (0)

Related Questions