Masonry не всегда работает корректно и как мне выровнять по центру?

Question

[ravshan selimov]

использую масонри
структура

<div class="main-posts grid"
  <div class="post grid-item">...</div>
  <div class="post grid-item">...</div>
  ...
  <div class="post grid-item">...</div>
  <div class="post grid-item">...</div>
</div>

.grid-item--height добавляю рандомно

стили

.grid{
 margin: 0 auto; //взял из документации для выравнивания по центру
}
.grid-sizer,
.grid-item {
  float: left;
  height: 350px;
  width: 25%;
  margin: 20px;
}

.grid-item--height2 { height: 400px; }
.grid-item--height3 { height: 450px; }
.grid-item--height4 { height: 500px; }

иницализирую

this.mainMasonry = new Masonry( this.$posts, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true,
  isFitWidth: true // для выравнивания по центру
})

1) Как мне выровнить по центру блоки на сайте написано добавить isFitWidth: true и margin: 0 auto для контейнера, но у меня не работает


2) Не всегда блоки подстраиваются под высоту верхнего

Answer 1

[Максим]

masonry вообще отстойная библиотека - есть удобнее с понятной документацией , тот же isotope
насоветовали использовать masonry и вы купились сразу

и кстати скажу что ВСЕ библиотеки которые используют плиточную вёрстку используют абсолютное позиционирование

Comments

[ravshan selimov]

Спасибо, кажется нормально получается