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

Answer 1

Change

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

to

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

Answer 2

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.

Answer 3

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

Answer 4

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