Why does masonry not melt in the center and the photos in it are not rubber?

Question

css

The code.

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;}

That's what comes out Not in the center and on the bodies somehow strangely they are located. One photo is smaller and the other is larger. But the masonry itself works.

Answer 1

So, what exactly did you want?
And he doesn't seem to have to. His task is to line up the blocks sequentially. If they do not fit, then there is an empty space.
And actually sfiga they should be rubber? Moreover, you set the size for them (blocks :)
Read in general what the plugin does, you don’t need it here.
Plus, you immediately have bootstrap styles superimposed... WTF, what the hell is porridge???
PS
Here they will help you