Банальная проблема но не могу понять как выйти.
Есть марсони галлерея
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.
Банальная задача но как правильно сделать с этой библиотекой не доходит...
