使用物化CSS的图像网格/画廊

Question

我想使用实体化CSS制作一个响应式图像网格。在此网格视图中，我面临一个问题，即图像之间留有一些大的空白。如何使用实现CSS填充两个图像之间的这些空白？ 大小相等的图像之间(screenshot of the problem)不会留有任何空白，但是当我添加大小不等的图像时，它们之间会留有空白...我想用不同大小的图像自动填充空白，我的网格中有超过12张不同大小的图像。

<div class="row">
     <div class="col s12 m6 l4">
           <div class="card">
                <img src="img/adorable-animal-baby-160933.jpg" alt="adorable-animal-baby" class="resopnsive-img card materialboxed" data-caption="adorable animal and baby">
            </div>
        </div>

        <div class="col s12 m6 l4">
             <div class="card">
                   <img src="img/adorable-animal-breed-356378.jpg" alt="adorable-animal-breed" class="resopnsive-img card materialboxed" data-caption="adorable animal breed">
               </div>
          </div>
          
         <div class="col s12 m6 l4">
               <div class="card">
                    <img src="img/animal-animal-photography-blur-460775.jpg" alt="animal-animal-photography-blur" class="resopnsive-img card materialboxed" data-caption="animal animal photography">
                </div>
          </div>
</div>

Answer 1

那是common problem。

有人回答说他使用物化流文本来完成这项任务。

当我想要一个流畅的网格时，我会使用masonry-layout，因为它很容易集成。

这里是discussion to solve the problem without javascript。