Как сделать Isotope gallery 3 в ряд?

Question

[Артем Колчин]

Банальная проблема но не могу понять как выйти.
Есть марсони галлерея
https://isotope.metafizzy.co/

<div data-gallery data-iso-items class="main_gallery__wrap">
				<a href="@img/gallery/gallery_img1.png" data-iso-item class="main_gallery__image">
					<img alt="Превью" src="@img/gallery/gallery_img1.png" class="gallery__preview">
				</a>
				<a href="@img/gallery/gallery_img2.png" data-iso-item class="main_gallery__image">
					<img alt="Превью" src="@img/gallery/gallery_img2.png" class="gallery__preview">
				</a>
				<a href="@img/gallery/gallery_img3.png" data-iso-item class="main_gallery__image">
					<img alt="Превью" src="@img/gallery/gallery_img3.png" class="gallery__preview">
				</a>
				<a href="@img/gallery/gallery_img4.png" data-iso-item class="main_gallery__image">
					<img alt="Превью" src="@img/gallery/gallery_img4.png" class="gallery__preview">
				</a>
				<a href="@img/gallery/gallery_img5.png" data-iso-item class="main_gallery__image">
					<img alt="Превью" src="@img/gallery/gallery_img5.png" class="gallery__preview">
				</a>
				<a href="@img/gallery/gallery_img6.png" data-iso-item class="main_gallery__image">
					<img alt="Превью" src="@img/gallery/gallery_img6.png" class="gallery__preview">
				</a>
			</div>

const items = document.querySelector('[data-iso-items]');
if (items) {
	const itemsGrid = new Isotope(items, {
		itemSelector: '[data-iso-item]',
		masonry: {
			//fitWidth: true,
			gutter: 30,
			columnWidth: '.main_gallery__image'
		}
	});
}

.main_gallery {
    &__container {
        max-width: toRem(1200);
    }

    &__wrap {}

    &__image {
        width: 33.333%;
        margin-bottom: toRem(30);

        img {
            width: 100%;
            height: auto;
            max-width: 100%;
        }
    }

}

По факту нужна марсони 3 в ряд, поэтому задал ширину 33.333% с отступами блоков по бокам 30 и снизу 30, все задается как надо, но почему то 2 в ряд.
Подозреваю что отступы не учитываются и поэтому 3 элемент не входит, также если написать 20% ширину, то будут не 5 элементов а 4.

Банальная задача но как правильно сделать с этой библиотекой не доходит...

Comments

[Ankhena]

Откройте инструменты разработчика и посчитайте сумму ширин элементов и отступов. Сделайте вывод, скорректируйте.

[Артем Колчин]

Ankhena, так в этом и проблема, что он же выставляет по position absolite
То есть что я задал gutter: 30, он учитывает как оступ между элементами.

[Ankhena]

Артем Колчин,
И теперь вы не можете из 100% отнять отступы и посчитать какая же ширина должна быть у колонок?