1

I want to make a responsive Image Grid using materialize CSS. In this grid view, I'm facing a problem where images left some big blank spaces between them. How can I fill these blank spaces between two images using materialize css? Equal size images don't leave any blank space between them (screenshot of the problem) but when I add images of unequal sizes they left blank spaces between them...I want to fill the blank spaces automatically with different size of images, there are more than 12 images of different sizes in my grid. 

<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>
K.Kumar
  • 11
  • 2

1 Answers1

0

thats a common problem.

Someone responsed he uses the materialize flowtext for this task.

When I want to have a fluent grid I use masonry-layout, as it's fairly easy to integrate.

Here is a discussion to solve the problem without javascript.

paulsbecks
  • 116
  • 1
  • 7