CODEWITHSUNDEEP
htmlcssgrid-layoutmasonry
RickyHalim
RickyHalim

Reputation: 295

How to remove gap in masonry?

I am trying to create a pinterest-like grid layout in my web using Masonry.

However this is the result when I tested my code: enter image description here

As you can see there is a lot of gap in between the divs. How do I remove them?

Below is my code: HTML

<div class="itemsList">
      <div class="item"></div>
      <div class="item w2"></div>
      <div class="item"></div>
      <div class="item w2"></div>
      <div class="item h2"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>

MASONRY

$( function() {

         $(".itemsList").masonry({
          columnWidth: 1,
          itemSelector: ".item",
          gutter: 15
        });     
    });

CSS

.item {
    width:120px;
    height: 160px;
    float: left;
    margin-right:5px;
    margin-top:10px;
    background: #CCC;
     vertical-align: top;
}


.item.h2 {
    height: 130px;
}

Upvotes: 2

Views: 1598

Answers (1)

matthias_h
matthias_h

Reputation: 11416

If you want no gaps at all, you should just try to call masonry without any options: 

$(".itemsList").masonry({
});

Already tested on the masonry-examples, e.g. here Masonry with columnWidth: 60 (set in this example). You should just check the examples and documentation from here: Masonry options. In provided examples you can just test the different options and add your html and css as I already did and just removed the options you set for masonry. I just saved the result here: Masonry Codepen
I replaced the example HTML with 3 copies of your items (so there are enough items to create a layout) and added your css. As I'm not sure if you want to overwrite the masonry css, it's just added at the end of the masonry css.

Upvotes: 1

Related Questions