[BUG] Packed layout is not working as expected when added more items

[vishvega]

Describe the bug
Used filterizr to display a loop of divs which contains an image, overlay background and overlay text(overlay only displays on item hover).

it was working fine for few items, but when I add more items to the grid, it went haywire.

I wanted to show each item in the grid packed. with no spaces between them. so I first try with no bootstrap grid and later I added bootstrap grid with adding col-md-3 class to each item.

both procedures provide me a grid with overlapped width viewport. I've set width of main container to be 100% and each item in the grid have width of 25% from bootstrap's col-md-3 and I removed paddings and margins. please see the image below.

this is my filterizr config.

var filterizd = jQuery('.filtr-container').filterizr({
	animationDuration: 0.7, // in seconds
	callbacks: { 
		onFilteringStart: function() { },
		onFilteringEnd: function() { },
		onShufflingStart: function() { },
		onShufflingEnd: function() { },
		onSortingStart: function() { },
		onSortingEnd: function() { }
	},
  controlsSelector: '', // Selector for custom controls
  delay: 0, // Transition delay in ms
  delayMode: 'progressive', // 'progressive' or 'alternate'
  easing: 'ease-out',
  filter: 'all', // Initial filter
  filterOutCss: { // Filtering out animation
  	opacity: 0,
  	transform: 'scale(0.5)'
  },
  filterInCss: { // Filtering in animation
  	opacity: 0,
  	transform: 'scale(1)'
  },
  gridItemsSelector: '.filtr-item',
  gutterPixels: 0, // Items spacing in pixels
  layout: 'packed', // See layouts
  multifilterLogicalOperator: 'or',
  setupControls: true, // Should be false if controlsSelector is set 
  spinner: { // Configuration for built-in spinner
  	enabled: false,
  	fillColor: '#2184D0',
  	styles: {
  		height: '75px',
  		margin: '0 auto',
  		width: '75px',
  		'z-index': 2,
  	},
  },
});

Filterizr version
I have jQuery version => jQuery v3.4.1
Filterizr version => 1.3.5
(I also tried with newer version, v 2.2.3, but the result is same. read somewhere that Filterizr may have some issues with jquery 3, so I tried with jquery version 2, sadly result was still the same.)

There are some kind of gaps between each item, which couldn't catch with chrome dev tools inspector nor firefox inspector, I tried to investigate what those gaps are and how they originated, but I wasn't successful. those gaps aren't visible when using few (lets say 5 or 6) items though.

gaps on each element is what makes the overlap. I think

Expected behavior
Packed grid with no spaces between each item. just like in here when select Square in Examples selector.

Screenshots
added

Desktop (please complete the following information):

• OS: windows 10
• Browser both chrome v80 and firefox v73

Additional context
is there any problem with my config or do I have to take any additional steps?

[giotiskl]

It appears to me that all items have the same width and height, why not try the sameSize layout?