Блог

Я создаю галерею изображений с помощью MaterializeCSS, но когда изображения разной высоты, они помещаются в крайнее правое место, что приводит к большому пробелу.

 <div id="recent" class="row">
    <div class="imagetab-grid" "col s3">
      <img class="materialboxed" src="img/no10.jpg" data-caption="">
    </div>
    <div class="imagetab-grid" "col s3">
      <img class="materialboxed" src="img/img_4332.jpg" data-caption="">
    </div>
    <div class="imagetab-grid" "col s3">
      <img class="materialboxed" src="img/no48.jpg" data-caption="">
    </div>
    <div class="imagetab-grid" "col s3">
      <img class="materialboxed" src="img/img_4447.jpg" data-caption="">
    </div>
    <div class="imagetab-grid" "col s3">
      <img class="materialboxed" src="img/img_4479.jpg" data-caption="">
    </div>
</div>
  

 .imagetab-grid {
    box-sizing: border-box;
    width: 25%;
    padding: 10px;
    float: left;
}
    
.imagetab-grid img {
    width: 100%;
}
  

из-за чего это происходит:

Пятое изображение перемещается в крайнее правое положение, затем сбрасывается, а третья строка продолжается в обычном режиме

Похоже, что либо imagetab-grid класс, который я написал, либо что-то встроенное в Materialize вызывает эту проблему. Любые предложения о том, что делать?