Centered masonry content inside of gridster

Question

I need to put a dynamic tile layout inside a gridster widget. I have put there masonry grid but I want the content to be centred instead of floated left. I have found that I need to change isFitWidth property to true and a fixed sized columnWidth but since the gridster widget can be resized it doesn't work very well. I tried to initialize masonry with these properties dynamically inside gridster resize property but it doesn't work either.

Any ideas how to make it work? Or should i use a different grid instead of masonry

HTML:

<div class="gridster">
  <ul class="ul-grid">
    <li>
      <div class="wrapper">
        <div class="grid">
          <div class="grid-item">
          </div>
          <div class="grid-item">
          </div>
          <div class="grid-item">
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

CSS:

.wrapper {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.grid {
  background: #DDD;
  max-width: 1200px;
  margin: 0 auto;
}
.grid-item {
  float: left;
  width: 100px;
  height: 100px;
  background: #0D8;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.7);
  margin: 3%;
}

JS:

$(document).ready(function () {
  $('.grid').masonry({
    itemSelector: '.grid-item'
  });
});

image

fiddle example

Centered masonry content inside of gridster

0 Answers0