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

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