I have isotope grid installed with filters, and it works fine :
var $grid = $('.grid')
$grid.isotope({
layoutMode: 'masonry',
itemSelector: '.box',
stagger: 30, // item transitions 30ms after one another
filter: '', // shown by default
percentPosition: true,
getSortData: {
number: '.number parseInt'
}
});
In my isotope grid items (.box) I would like my contents organized as a masonry grid. I tried first to install masonry after isotope, it did not work. Firefox says: "Error in parsing value for ‘top’. Declaration dropped. index.html:1:1". And also the same with 'left'.:
$('.box').masonry({
itemSelector: '.div',
columnWidth: '.div-sizer',
percentPosition: true
})
I also asked the free GPT chat what is the problem, it suggested these codes, but Firefox says the same as at above codes:
// Initialize Masonry on Isotope's items
$grid.find('.box').each(function() {
var masonry = new Masonry(this, {
itemSelector: '.div',
columnWidth: '.div-sizer',
percentPosition: true
// Additional Masonry options...
});
});
My CSS for isotope and masonry elements :
/* isotope* grid and item */
.grid {display:block;width:calc(90% + 80px);margin:50px auto;}
.box {width:100%;margin:0 0 20px 0 !important;padding:3%;background:#f7f7f7;font-size:initial;}
/* masonry items */
.div {width:25%;float:left;padding:20px;}
.div-sizer {width:25%}
.div1 {width:100%;}
.div2 {width:50%;}
First of all, I do not understand what is the problem of Firefox, it does not indicate any css line where the problem is with top and left, my html first line is as always : <!DOCTYPE html>
Second problem is that the contents in my grid items do not be ordered like masonry.