Centering a group of images using Masonry

Question

I am using Masonry.js on a group of images and trying to center the entire group. I have gotten the group to center when I specify the width of the container grid and set margin:0 auto, but would love to center it using a more fluid grid or percentages. (I realize I could use media queries to change the fixed width, but looking for a more seamless option.)

Here is an example of the code with a fixed width which is centering just fine.

And here is an example of the more fluid example that I am trying to center but margin:0 auto isn't working.

Answer 1

you can center a masonry layout using the isFitWidth parameter: http://masonry.desandro.com/demos/centered.html

$('.container').masonry({ isFitWidth: true });

This parameter will set the width value on the container, and this will allow you to center the container using CSS:

.container {
  margin: 0 auto;
}