That's an interesting concept. I've seen that situation before but in my case they don't have a max-height or a height.
I'm attaching a screenshot of what it looks like for reference and below are the CSS rules that applied to the item-box. As you can see, we are on page 2 and there are 5 + pages, yet this page has three empty spaces where three item-boxes should go.
This page in particular has 39 item-boxes, the next one only came with 33, go figure!
@media (min-width: 1200px)
.product-grid .item-box {
margin: 0 5px 5px 0;
}
@media (min-width: 961px)
.product-grid .item-box {
margin: 0 5px 5px 0;
width: 16.1%;
}
@media (min-width: 1201px)
.product-grid .item-box {
margin: 0 5px 5px 0;
overflow: hidden;
}
@media (min-width: 1201px)
.item-box:nth-child(4n+1) {
clear: both;
}
@media (min-width: 1201px)
.item-box:nth-child(3n+1) {
clear: none;
}
@media (min-width: 961px)
.product-grid .item-box {
width: 250px;
margin: 0;
overflow: hidden;
}
@media (min-width: 961px)
.item-box:nth-child(4n+1) {
clear: both;
}
@media (min-width: 961px)
.item-box:nth-child(3n+1) {
clear: none;
}
@media (min-width: 769px)
.product-grid .item-box {
width: 33.333%;
}
@media (min-width: 769px)
.item-box:nth-child(3n+1) {
clear: both;
margin-left: 0;
}
@media (min-width: 769px)
.item-box:nth-child(2n+1) {
clear: none!important;
}
@media (min-width: 481px)
.product-grid .item-box {
float: left;
width: 50%;
}
.product-grid .item-box {
margin: auto;
width: 90%;
max-width: 250px;
}
@media (min-width: 769px)
.item-box {
width: 33.333%;
}
.item-box {
position: relative;
width: 100%;
margin: 0 0 20px;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
* {
margin: 0;
outline: none;
padding: 0;
text-decoration: none;
}
user agent stylesheet
div {
display: block;
}
Inherited from div.page.search-page
.page {
clear: both;
text-align: center;
}
Inherited from body.notAndroid23.color-sugar
body {
font: normal 13px 'Helvetica Neue', Helvetica, sans-serif;
}
body {
max-width: 100%;
background: #fff;
font: normal 13px "Trebuchet MS",Arial,Helvetica,sans-serif;
overflow-x: hidden;
}
Inherited from html.k-webkit.k-webkit55
html {
margin: 0!important;
-webkit-text-size-adjust: none;
}
Pseudo ::before element
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Pseudo ::after element
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}