Почему masonry не стает по центру и фото в нем не резиновые?

Question

[freeman0204]

Код.

section
        .container
          .row
            .col-lg-12
              h2.black Меню на любой вкус!
          .row
            .grid
              .col-lg-8.grid-item.grid-item--width2
                  img(src="images/3.jpg", alt="")
              .col-lg-4.grid-item
                  img(src="images/4.jpg", alt="")
              .col-lg-8.grid-item.grid-item--width2
                  img(src="images/3.jpg", alt="")
              .col-lg-4.grid-item
                  img(src="images/4.jpg", alt="")

$(window).ready(function(){
      $('.grid').masonry({
      // options
        itemSelector: '.grid-item',
        columnWidth: '.grid-item',
        gutter: 5,
        fitWidth: true,
       });
     });

.grid {
  margin: 0 auto;
}

.grid-item { width: 407px; padding: 0; height: 264px; margin-bottom: 5px;}
.grid-item--width2 { width: 563px;}

Вот что выходит Не по центру и на тел как то странно они располагаются. Одна фото меньше по ширине а вторая больше. Но сама масонри работает.

Answer 1

[Иван]

Ну так а собственно чего вы хотели?

masonry не стает по центру

А он вроде как и не должен. У него задача выстроить блоки последовательно. Если они не влезают, то остается пустое место.

фото в нем не резиновые

А собственно сфига они должны быть резиновыми? Тем более вы им размер задали (блокам :)

Почитайте вообще что плагин делает, он вам походу тут и не нужен.
Плюс у вас тут же накладываются стили бутстрапа ... WTF, что блин за каша???

ЗЫ
Тут вам помогут