10

Why can't I show 4 items by row if the width of each one is 25% and the gutter param is 10? Please help me!

$('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
    gutter: 10
});

http://codepen.io/davelins/pen/bdoRGa

Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Dave Lin
  • 113
  • 1
  • 1
  • 5

4 Answers4

24

Change 

.grid-item {
  width: calc(25%);
}

to 

.grid-item {
  width: calc(25% - 10px);
 }
Samir Das
  • 1,878
  • 12
  • 20
18

The accepted answer above is not pixel-perfect. If you watch the pen http://codepen.io/anon/pen/aOLxwW you see a gutter to the very right, which is probably not what you want, at least not what I want. That is due to, the item-width is calculated too small with

.grid-item {
  width: calc(25% - 10px);
}

It should in fact be calc(25% - 7.5px). The formula for it would be 

//pseudocode to illustrate the idea. how you would do that dynamically whould be up to the language you choose (e.g. php, js...)
$number_of_cols = 3; //for example
$column_width = 100 / $number_of_cols; //a float value, e.g. 33.33333333 in this example
$item_width_diff = $gutter * ($number_of_cols - 1) / $number_of_cols; //in this example: 10*2/3 = 6.6666666

then in your css you would have

.grid-item {
  width: calc(25% - $item_width_diff);
}

https://codepen.io/anon/pen/YjPvbL

niklas
  • 2,887
  • 3
  • 38
  • 70
  • This is perfect. What is it about Masonry's output that we have to do this? The absolute positioning of the grid items? – Brian Zelip Oct 04 '19 at 11:11
  • This answer deserves more attention and more upvotes. – Ricardo Castañeda Jan 09 '20 at 17:09
  • @BrianZelip what do you mean? – niklas Jan 14 '20 at 22:26
  • @niklas - Hmm, I'm no longer sure :) I just remember having to add absolute positioning on some Isotope grid items. Cheers – Brian Zelip Jan 16 '20 at 16:16
  • This works! I don't understand why it's necessary thought and it feels like there should be a way of handling this within masonry.js's options. – aronmoshe_m Oct 21 '20 at 23:08
  • This is excellent. For anyone wondering, if you have a 3-column layout and you have an item that spans 2 columns (66.66% width), you will get the correct value if you run the calculation as if there were 2 columns only with `$number_of_cols = 2`. – Sigurd Mazanti Feb 02 '23 at 14:40
0
    **Let us try it with 100% working example**
    [https://codepen.io/sandeepkamara/pen/bGMOPdQ][1]

    **Javascript Code**
    jQuery(window).load(function(){
        var $grid = jQuery('.grid').isotope({
            itemSelector: '.element-item',
            masonry: {
                percentPosition: true,  
                columnWidth: '.element-item',
            }
        });
    });

    **Css Code**
    .grid .element-item {
        width: calc(50% - 20px);
        margin: 10px;
     }
     .grid .element-item img {
        width: 100%;  
     }

     @media screen and (max-width: 767px) {
       .grid .element-item {
          width: 100%;
       } 
     }

    **HTML Code**
    <div class="grid">
        <div class="element-item">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/1200px-Altja_j%C3%B5gi_Lahemaal.jpg" alt="nature image" />
        </div>
        <div class="element-item">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Altja_j%C3%B5gi_Lahemaal.jpg/1200px-Altja_j%C3%B5gi_Lahemaal.jpg" alt="nature image" />
        </div>
    </div>


  [1]: https://codepen.io/sandeepkamara/pen/bGMOPdQ
Sandeep Kamra
  • 81
  • 1
  • 4
-3

Just normalize the css before adding your own css to HTML element. And it will work. It's adding margin to div from inherited css.

KnightIn
  • 18
  • 2