Masonry - Column width percent + gutter

Question

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

Ulpian

Answer 1

Change

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

to

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

Natalya

In your example, there is also a "gutter" to the very left where it should not be in my opinion – Laurasia

Answer 2

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

Laurasia

This is perfect. What is it about Masonry's output that we have to do this? The absolute positioning of the grid items? – Coarsen

This answer deserves more attention and more upvotes. – Waste

@BrianZelip what do you mean? – Laurasia

@Laurasia - Hmm, I'm no longer sure :) I just remember having to add absolute positioning on some Isotope grid items. Cheers – Coarsen

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. – Toplevel

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. – Hobie

Answer 3

    **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

Hammel

Answer 4

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.

Captain

This doesn't answer the question, and it is not clear what you are referring to. – Jerrold