javascriptjquerymasonry

Masonry - Column width percent + gutter

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

Solution

  • Change 

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

    to 

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