javascript html twitter-bootstrap jquery-isotope packery

Isotope JS Packery Tile Gaps

I’m using the Packery layout mode in Isotope JS. I was using Masonry, but I found I was getting more desirable results using this mode instead, but I’m totally open to other options. I’m also using it integrated with the Bootstrap responsive grid as described here. Everything is working great with the exception of one thing.

I have a single-wide tile, then a double-wide tile, followed by several single-wide tiles. Everything looks great in the Bootstrap 4 and 3 column configurations. As soon as I collapse it to the 2 column configuration, I only have 1 single-wide tile up top in the first position. The double-wide is below, and all the single wide tiles show up side-by-side (2 per row) all the way down, as desired. There is even 1 tile left over at the bottom by itself, that if rearranged, each single-wide tile would be paired with another of the same type.

Here are some quick grids of the 3 different column configurations for some visualization:

4-Columns:     3-Columns:  2-Columns:
+--+--+--+--+  +--+--+--+  +--+--+
|88|88888|88|  |88|88888|  |88|  <---this empty tile right here...
|88|88|88|88|  |88|88|88|  |88888|
|88|88|  |  |  |88|88|88|  |88|88|
+--+--+--+--+  |88|  |  |  |88|88|
               +--+--+--+  |88|88|
                           |88<------...should be filled up by this 
                           +--+--+      tile (or one before it)

Here's a repro:

$('.grid').isotope({
	packery: {
		columnWidth: '.grid-sizer'
	},
	itemSelector: '.grid-item',
	percentPosition: true,
});

.one {
  background-color: red;
}
.two {
  background-color: orange;
}
.three {
  background-color: yellow;
}
.four {
  background-color: green;
}
.five {
  background-color: blue;
}
.six {
  background-color: purple;
}
.seven {
  background-color: red;
}
.eight {
  background-color: orange;
}
.nine {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<div class="container-fluid">
	<div class="row">
		<div class="grid">
			<div class="grid-sizer col-xs-6 col-sm-4 col-md-3"></div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 one">
				<div class="grid-item-content">ONE</div>
			</div>
			<div class="grid-item col-md-6 col-sm-8 col-xs-12 two">
				<div class="grid-item-content">TWO</div>
			</div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 three">
				<div class="grid-item-content">THREE</div>
			</div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 four">
				<div class="grid-item-content">FOUR</div>
			</div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 five">
				<div class="grid-item-content">FIVE</div>
			</div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 six">
				<div class="grid-item-content">SIX</div>
			</div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 seven">
				<div class="grid-item-content">SEVEN</div>
			</div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 eight">
				<div class="grid-item-content">EIGHT</div>
			</div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 nine">
				<div class="grid-item-content">NINE</div>
			</div>
		</div>
	</div>
</div>

Any ideas? Thank you!

Solution

Solution below (credit to @Macsupport !):

$('.grid').packery({
    itemSelector: '.grid-item',
});

.one {
  background-color: red;
}
.two {
  background-color: orange;
}
.three {
  background-color: yellow;
}
.four {
  background-color: green;
}
.five {
  background-color: blue;
}
.six {
  background-color: purple;
}
.seven {
  background-color: red;
}
.eight {
  background-color: orange;
}
.nine {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/packery@2/dist/packery.pkgd.min.js"></script>
<div class="container-fluid">
	<div class="row">
		<div class="grid">
			<div class="grid-sizer col-xs-6 col-sm-4 col-md-3"></div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 one">
				<div class="grid-item-content">ONE</div>
			</div>
			<div class="grid-item col-md-6 col-sm-8 col-xs-12 two">
				<div class="grid-item-content">TWO</div>
			</div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 three">
				<div class="grid-item-content">THREE</div>
			</div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 four">
				<div class="grid-item-content">FOUR</div>
			</div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 five">
				<div class="grid-item-content">FIVE</div>
			</div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 six">
				<div class="grid-item-content">SIX</div>
			</div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 seven">
				<div class="grid-item-content">SEVEN</div>
			</div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 eight">
				<div class="grid-item-content">EIGHT</div>
			</div>
			<div class="grid-item col-md-3 col-sm-4 col-xs-6 nine">
				<div class="grid-item-content">NINE</div>
			</div>
		</div>
	</div>
</div>