I have a row with two columns, where the first column has a right margin and the second one does not. I would like to use jQuery Masonry to eliminate any empty spaces. However, it seems that the margin right does not interact well with Masonry.
Is there a way to maintain the same width for all boxes and remove the margin after the second box in the row?
Below is the HTML code:
<div class="list">
<div class="item"></div>
<div class="item no-margin"></div>
<div class="item"></div>
<div class="item no-margin"></div>
<div class="item"></div>
<div class="item no-margin"></div>
</div>
CSS:
.list{
width: 350px;
border: 1px solid red;
overflow: hidden;
}
.item{
width: 150px;
height: 150px;
background: green;
margin-right: 50px;
margin-bottom: 50px;
float: left;
}
.no-margin{
margin-right: 0 !important;
}
jQuery:
jQuery('.list').masonry({
itemSelector: '.item',
});