使用物化 css 的图像网格/画廊答案

【问题标题】：image grid/gallery using materialize css使用物化 css 的图像网格/画廊
【发布时间】：2018-07-03 19:01:21
【问题描述】：

我想使用物化 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>

【问题讨论】：

标签： css materialize

【解决方案1】：

那是common problem。

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

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

这是discussion to solve the problem without javascript。

【讨论】：