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?

Finnougrian

Answer 1

Easiest way is to use masonry:

jsFiddle

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

Wamsley

I like your solution better. The only caveat is OP's #container has a non-fixed width. He specified that in the question. – Staff

@macsupport They are not centered. If you add a second row they float to the left, this is not center alignment. – Dichromatism

Answer 2

use masonry and add margin 0 auto to the grid.

js:

 masonry: {
  columnWidth: 100,
  fitWidth: true
}

css :

 .grid {
      margin: 0 auto;
  }

Disappear

Could you please edit your answer to include in more detail how you would do this. It is not clear to me at least how to apply your answer to the fiddle in the question. Also a link to some reference of what masonry is would probably be helpful to other readers. – Apparatus

Answer 3

It looks like each of your boxes is being assigned absolute positioning like so:

<div class="box" style="position: absolute; left: 0px; top: 0px;"></div>
<div class="box" style="position: absolute; left: 80px; top: 0px;"></div>
<div class="box" style="position: absolute; left: 160px; top: 0px;"></div>
<div class="box" style="position: absolute; left: 240px; top: 0px;"></div>

The way I got it to work was to wrap all the boxes in another div container, and manipulate the relative positioning of that new container like this (or check out this fiddle):

var $container = $('#container');
// init
$container.isotope({
  // options
  itemSelector: '.box',
  layoutMode: 'fitRows'
});

#container {
  background-color: #333;
  width: 90%;
  height: auto;
  margin: 0 auto;
  position: relative;
}

#boxes-collection {
  position: absolute;
  left: 28%;
  width: 100%;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://squaredoodletest.t15.org/JS/isotpoe.js"></script>
<div id="container">
  <div id="boxes-collection">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

Staff

This seems to be counteracting what isotope is doing since isotope is what is setting the absolute positioning. – Wamsley