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?

score 2 · Accepted Answer · answered Nov 17 '14 at 15:08

2

Easiest way is to use masonry:

jsFiddle

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

answered Nov 17 '14 at 15:08

Macsupport

5,144
3
24
41

I like your solution better. The only caveat is OP's `#container` has a non-fixed width. He specified that in the question. – ivan.sim Nov 17 '14 at 17:49
6

@macsupport They are not centered. If you add a second row they float to the left, this is not center alignment. – justme Jul 30 '16 at 08:01

score 2 · Answer 2 · answered Jul 30 '20 at 10:25

2

use masonry and add margin 0 auto to the grid.

js:

 masonry: {
  columnWidth: 100,
  fitWidth: true
}

css :

 .grid {
      margin: 0 auto;
  }

answered Jul 30 '20 at 10:25

achraf arrami

21
2

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. – Superole Jul 30 '20 at 11:16

ivan.sim · Answer 3 · 2014-11-17T05:37:11.780

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>

This seems to be counteracting what isotope is doing since isotope is what is setting the absolute positioning. — Macsupport, Nov 17 '14 at 15:27

How to center items inside isotope container?

3 Answers3