Seeking a solution to automatically generate a DIV when our products do not fill up the entire row, using the MixItUp jQuery filter and sort plugin.
Is there a JavaScript code that can detect the empty space in a row and create the necessary div to maintain the pattern?
See where this should happen: printnil.com
.container{
text-align: justify;
font-size: 0.1px;
-webkit-backface-visibility: hidden;
float: left;
background: #fff;
width: 100%;
}
.container:after{
content: '';
width: 100%;
display: inline-block;
}
.container .mix,
.container .gap{
margin-bottom:1.5%;
}
.container .mix{
display: none;
}
.container .mix:after{
content: attr(data-myorder);
vertical-align: top;
}
.container .mix:before{
content: '';
}
.mix{
text-align: justify;
display: inline-block;
width: 100%;
position: relative;
box-sizing: border-box;
background: #f2f2f2;
}
@media only screen and (min-width:568px){
.container .mix,
.container .gap{
width: 49.5%;
margin-bottom:1%;
}
}
@media only screen and (min-width:1024px){
.container .mix,
.container .gap{
width: 33%;
margin-bottom:0.5%;
}
}