0

I want to present my image in a grid style just like the style of giphy where every row has little spaces and everything fits into each other.

Giphy grid style

I'm about to do the same on my side but am having a problem with closing up the spaces between the columns.

How my current grid style look can be found here: https://i.stack.imgur.com/7pzLq.jpg

My code is: 

<div class="container">
<div class="row " style="height: 300px; margin-bottom:0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; ">         



   <% for(var i=0; i<tags.length; i++) { %>

            <div class="col-md-6" class="" style="padding-right:0px;
    padding-left:0px; padding-top: 0px">
<!--p style="color: white; font-size: 30px"><%= caption[i] %> </p-->    

<a href="/meme/<%= pathi[i]%>"><img src='<%= path[i] %>' class="img-responsive" style="height: auto">  </a>

</div>  

</div>
</div>

<%}%>

How do I make this work in CSS/bootstrap?

Abiodun Adetona
  • 11
  • 1
  • 8

1 Answers1

0

   
@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        /* column-count: 4; */
    }
}

        
        .masonry {
        margin: 1.5em 0;
        padding: 0;
        -moz-column-gap: 1.5em;
        -webkit-column-gap: 1.5em;
        column-gap: 1.5em;
        font-size: .85em;
    }

    .item {
        display: inline-block;
        background: #fff;
        padding: 1.5em;
        margin: 0 0 1.5em;
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.18);
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
    }
    <div class="masonry">
      <div class="item"><img src="http://w3bits.com/wp-content/uploads/masonry.jpg"></div>
      <div class="item">Text-only masonry block.</div>
      <div class="item">
       <img src="http://media-cache-ec0.pinimg.com/736x/c3/10/22/c3102281f88237e7a2515099d2e6651f.jpg">
      </div>
      <div class="item">
       <img src="http://media-cache-ec0.pinimg.com/736x/0f/d0/84/0fd0847f7b48e5f16d896f62baa31b97.jpg">
      </div>
      <div class="item">
       <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=+&amp;q=taj+mahal&amp;ie=UTF8&amp;hq=&amp;hnear=&amp;ll=27.175015,78.042155&amp;spn=0.006295,0.006295&amp;t=m&amp;output=embed"></iframe>
      </div>
      <div class="item">
       <a href="https://twitter.com/w3bits_">I tweet sometimes.</a>
      </div>
      <div class="item">
       <img src="http://media-cache-ak0.pinimg.com/736x/2e/7f/db/2e7fdb7ed765973407fed0b0141bb126.jpg">
       <h2>A block with a headline using &lt;h2&gt; tag.</h2>
      </div>
      <div class="item">
       <img src="http://media-cache-ec0.pinimg.com/600x/0b/87/f4/0b87f4eb50b3d7a7c9d70d97234753ab.jpg"><br>
       Lorem ipsum dolor sit amet, dicta dolore adipisci hic ipsam velit deleniti possimus cumque accusantium rerum quibusdam.
      </div>
      <div class="item">
       <img src="http://media-cache-ec0.pinimg.com/600x/95/11/02/951102f18d5a50c3ca483e93c6f92f5a.jpg">
      </div>
      <div class="item">
       <iframe width="640" height="390" src="http://www.youtube.com/embed/cwGq-uy0bhI" frameborder="0" allowfullscreen=""></iframe>
      </div>
      <div class="item">
       <a href="https://plus.google.com/+w3Bits">Circle me on Google+</a>
      </div>
      <div class="item">
       <iframe src="http://player.vimeo.com/video/91605331" width="500" height="281" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
      </div>
      <div class="item">
       <img src="http://media-cache-ec0.pinimg.com/600x/97/35/91/97359142dce582b4530cb0f23fbe2e43.jpg">
      </div>
      <div class="item">
       <iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/13403434&amp;auto_play=false&amp;hide_related=false&amp;visual=true"></iframe>
      </div>
      <div class="item">
       <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fw3bits&amp;width&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=463074340468076" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:290px;" allowtransparency="true"></iframe>
      </div>
     </div>
dayan khan
  • 51
  • 3