Masonry layout

[git-user-hub]

Macy Masonry works better for me than the current Bootstrap suggestion.
What about integrating Macy Masonry JS into Bootstrap 6 JS?
This customization might be useful for most cases:

• waitForImages: true,
• macy_instance.runOnImageLoad(function () { macy_instance.recalculate(true); }, true);

An easy way to set xMargin (any units) and yMargin (no units) might be useful as well.
And columns and breakAt.

I currently use it as follows:

window.addEventListener('DOMContentLoaded', () => {
	const masonry = document.querySelectorAll('.masonry');
	let macyInstances = [];
	const macyOptions = {
		waitForImages: true,
		margin: {
			x: [USER SETTING],
			y: [USER SETTING]
		},
		columns: [USER SETTING],
		breakAt: {
			[USER SETTINGS]
		},
	};
	for (let i = 0; i < masonry.length; i++) {
		const id = 'masonry' + i;
		masonry[i].id = id;
		macyOptions.container = '#' + id;
		macyInstances.push(Macy(macyOptions));
		macyInstances[i].runOnImageLoad(function () {
			macyInstances[i].recalculate(true);
		}, true); 
	}
});

With masonry class instead of id, you can have multiple Macy Masonry instances on one page.

Thanks!

[git-user-hub]

or just KISS: simple masonry with css only:

.masonry-container {
  column-width: 360px;
  column-gap: 1.5em;
}

.masonry-item {
  break-inside: avoid-column;
  margin: 0 0 1.5em !important;
}

.masonry-item:last-child {
  margin: 0 !important;
}

with 3 css variables for user to adjust as needed