How to center items inside isotope container?

Question

I have an isotope grid with a non fixed width and I dont know how to center the items inside the isotope container.

.box{
width: 40px;
height: 40px;
background-color: #e74c3c;
margin: 0 auto;
}

that css fails to center the items. here is the link to the fiddle that illustrates my problem.

How can i make the red squares center inside the black box?

Answer 1

Easiest way is to use masonry:

jsFiddle

var $container = $('#container');
// init
$container.isotope({
// options
itemSelector: '.box',
masonry: {
columnWidth: 40,
isFitWidth: true
}
});

Answer 2

use masonry and add margin 0 auto to the grid.

js:

 masonry: {
  columnWidth: 100,
  fitWidth: true
}

css :

 .grid {
      margin: 0 auto;
  }