Masonry layout bug: items are displayed in a left column only

I am working on a Bootstrap 4 project.

For one of the pages, I am trying to put together a masonry layout width pictures most of which have a certain width, some of which have twice that width.

$('.grid').masonry({
  itemSelector: '.grid-item',
  columnWidth: 200
});

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
html {
  font-size: 14px;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline,
a.nounderlie:hover {
  text-decoration: none;
}
.navbar-nav {
  margin-left: auto;
}
.navbar-nav li {
  padding: 0 4px;
}
.navbar-nav li a {
  font-size: 20px;
  color: #fff;
  font-weight: 500;
  text-transform: lowercase;
}
.navbar-nav li.active a {
  text-decoration: underline;
}
.navbar-nav.black-text a {
  color: #000;
}
.masonry-layout {
  margin-top: 5rem;
}
.masonry-layout img {
  display: block;
  margin: 0 auto;
}
.masonry-layout .grid-item:nth-child(odd) {
  float: right;
}
.site-footer {
  color: #7E7E7E;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script>

<nav class="navbar fixed-top navbar-expand-lg navbar-default">
  <a class="navbar-brand white" href="index.html">
			Logo
	</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		<span></span>
	</button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav black-text">
      <li class="nav-item">
        <a class="nav-link" href="studii.html">Clients <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Culture</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="page-wrapper">

  <div class="container grid masonry-layout">
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item grid-item--width2 col-sm-12"><img src="https://placeimg.com/900/600/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item grid-item--width2 col-sm-12"><img src="https://placeimg.com/900/600/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
  </div>

  <footer class="site-footer container-fluid clearfix">
    <div class="row">
      <div class="col-md-6">
        <p class="text-center text-md-left">Toate drepturile rezervate | Propaganda | 2018</p>
      </div>
      <div class="col-md-6">
        <p class="text-center text-md-right">Ne gasesti si pe <a href="#">Facebook</a> si <a href="#">Youtube</a></p>
      </div>
    </div>
  </footer>

</div>

The small images are all on the right column. I thought this could be because the bootstrap columns are floated left. So I added float: right; to every odd item.

The situation did not improve. Where am I wrong?

Solution

Columns always need to be placed in a .row, remove the columnWidth: 200. Set 100% width on the images so they don't overflow their container.

$('.row').masonry({
  itemSelector: '.grid-item'
});

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}
html {
  font-size: 14px;
}
.page-wrapper {
  min-height: 100%;
}
a.inherit {
  color: inherit;
}
a.nounderline,
a.nounderlie:hover {
  text-decoration: none;
}
.navbar-nav {
  margin-left: auto;
}
.navbar-nav li {
  padding: 0 4px;
}
.navbar-nav li a {
  font-size: 20px;
  color: #fff;
  font-weight: 500;
  text-transform: lowercase;
}
.navbar-nav li.active a {
  text-decoration: underline;
}
.navbar-nav.black-text a {
  color: #000;
}
.masonry-layout {
  margin-top: 5rem;
}
.masonry-layout img {
  display: block;
  margin: 0 auto;
  width: 100%;
}

.site-footer {
  color: #7E7E7E;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script>

<nav class="navbar fixed-top navbar-expand-lg navbar-default">
  <a class="navbar-brand white" href="index.html">
			Logo
	</a>
  <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
		<span></span>
	</button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav black-text">
      <li class="nav-item">
        <a class="nav-link" href="studii.html">Clients <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Culture</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="contact.html">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="page-wrapper">

  <div class="container grid masonry-layout">
 <div class="row">
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item grid-item--width2 col-sm-12"><img src="https://placeimg.com/900/600/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item grid-item--width2 col-sm-12"><img src="https://placeimg.com/900/600/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
    <div class="grid-item col-xs-12 col-sm-6"><img src="https://placeimg.com/640/480/any" alt=""></div>
</div>
  </div>

  <footer class="site-footer container-fluid clearfix">
    <div class="row">
      <div class="col-md-6">
        <p class="text-center text-md-left">Toate drepturile rezervate | Propaganda | 2018</p>
      </div>
      <div class="col-md-6">
        <p class="text-center text-md-right">Ne gasesti si pe <a href="#">Facebook</a> si <a href="#">Youtube</a></p>
      </div>
    </div>
  </footer>

</div>