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

4 Answers 4

24

Change

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

to

.grid-item {
  width: calc(25% - 10px);
 }
2
  • My bad! Works fine! Thanks!
    – Dave Lin
    Jun 22, 2015 at 9:51
  • 1
    In your example, there is also a "gutter" to the very left where it should not be in my opinion
    – niklas
    Jul 11, 2018 at 16:51
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

6
  • This is perfect. What is it about Masonry's output that we have to do this? The absolute positioning of the grid items? Oct 4, 2019 at 11:11
  • This answer deserves more attention and more upvotes. Jan 9, 2020 at 17:09
  • @BrianZelip what do you mean?
    – niklas
    Jan 14, 2020 at 22:26
  • @niklas - Hmm, I'm no longer sure :) I just remember having to add absolute positioning on some Isotope grid items. Cheers Jan 16, 2020 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. Oct 21, 2020 at 23:08
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
-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.

1
  • This doesn't answer the question, and it is not clear what you are referring to.
    – Lisa
    Jun 26, 2022 at 19:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.