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);
 }