how to set grid in css like pinterest

Question

This my code

<div class='col-lg-3 aa'>
  <div class='panel panel-default'>
    <img class='img-responsive' src='gambar1'>
      <div class='panel-body'>
         <small>
           <img style='border-radius: 20%; width: 30px; height: 30px;' src='".base_url()."assets/images/profile/".$foto_user."'>
           <h5 style='margin-top: -30px; margin-left: 40px;'>".$value->nama."</h5><br>
           <i style='position: absolute; margin-top: -30px; margin-left: 40px;'>".$tanggal."</i>
           <p>".$value->deskripsi_laporan."</p>
         </small>
      </div>
 </div>
</div>

I use bootstrap, this is my display.

and I want to display it like pinterest, please help me to make my display look like pinterest..

that's not going to happen with plain bootstrap. You need something like Masonry or Isotope. But to get started, see this question: http://stackoverflow.com/questions/12570559/is-it-possible-to-create-a-pinterest-like-layout-with-bootstrap-only — Samia Ruponti, Jul 20 '16 at 07:55
check this one: http://bootsnipp.com/snippets/featured/pinterest-like-responsive-grid — love thakker, Jul 20 '16 at 08:02

score 0 · Answer 1 · answered Jul 20 '16 at 08:14

Try this way:

 width: 90%;
 max-width: 1100px;
 min-width: 800px;
 margin: 50px auto;
}

#columns {
 -webkit-column-count: 3;
 -webkit-column-gap: 10px;
 -webkit-column-fill: auto;
 -moz-column-count: 3;
 -moz-column-gap: 10px;
 -moz-column-fill: auto;
 column-count: 3;
 column-gap: 15px;
 column-fill: auto;
}

.pin {
 display: inline-block;
 background: #FEFEFE;
 border: 2px solid #FAFAFA;
 box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
 margin: 0 2px 15px;
 -webkit-column-break-inside: avoid;
 -moz-column-break-inside: avoid;
 column-break-inside: avoid;
 padding: 15px;
 padding-bottom: 5px;
 background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
 opacity: 1;
 -webkit-transition: all .2s ease;
 -moz-transition: all .2s ease;
 -o-transition: all .2s ease;
 transition: all .2s ease;
}

.pin img {
 width: 100%;
 border-bottom: 1px solid #ccc;
 padding-bottom: 15px;
 margin-bottom: 5px;
}

.pin p {
 font: 12px/18px Arial, sans-serif;
 color: #333;
 margin: 0;
}

@media (min-width: 960px) {
 #columns {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
 }
}

@media (min-width: 1100px) {
 #columns {
  -webkit-column-count: 5;
  -moz-column-count: 5;
  column-count: 5;
 }
}

#columns:hover .pin:not(:hover) {
 opacity: 0.4;
}

<div id="wrapper">

#wrapper {
<div id="columns">
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed feugiat consectetur pellentesque. Nam ac elit risus, 
    ac blandit dui. Duis rutrum porta tortor ut convallis.
    Duis rutrum porta tortor ut convallis.
   </p>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
   <p>
    Donec a fermentum nisi. 
   </p>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
   <p>
    Nullam eget lectus augue. Donec eu sem sit amet ligula 
    faucibus suscipit. Suspendisse rutrum turpis quis nunc 
    convallis quis aliquam mauris suscipit.
   </p>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
   <p>
    Nullam eget lectus augue. Donec eu sem sit amet ligula 
    faucibus suscipit. Suspendisse rutrum turpis quis nunc 
    convallis quis aliquam mauris suscipit.
   </p>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
   <p>
    Donec a fermentum nisi. Integer dolor est, commodo ut 
    sagittis vitae, egestas at augue. 
   </p>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed feugiat consectetur pellentesque. Nam ac elit risus, 
    ac blandit dui. Duis rutrum porta tortor ut convallis.
    Duis rutrum porta tortor ut convallis.
   </p>
  </div> 
  
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
   <p>
    Nullam eget lectus augue. Donec eu sem sit amet ligula 
    faucibus suscipit. Suspendisse rutrum turpis quis nunc 
    convallis quis aliquam mauris suscipit.
    Duis rutrum porta tortor ut convallis.
   </p>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
   <p>
    Nullam eget lectus augue. 
   </p>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/8/8kEc1hS.png" />
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed feugiat consectetur pellentesque. 
   </p>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
   <p>
    Donec a fermentum nisi. Integer dolor est, commodo ut 
    sagittis vitae, egestas at augue. Suspendisse id nulla 
    ac urna vestibulum mattis. Duis rutrum porta tortor ut convallis.
   </p>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
   <p>
    Donec a fermentum nisi. Integer dolor est, commodo ut 
    sagittis vitae, egestas at augue. Suspendisse id nulla 
    ac urna vestibulum mattis. 
   </p>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed feugiat consectetur pellentesque. Nam ac elit risus, 
    ac blandit dui. Duis rutrum porta tortor ut convallis.
   </p>
  </div> 
  
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" />
   <p>
    Donec a fermentum nisi. Integer dolor est, commodo ut 
    sagittis vitae, egestas at augue. Suspendisse id nulla 
    ac urna vestibulum mattis. 
   </p>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/1/1swi3Qy.png" />
   <p>
    Donec a fermentum nisi. Integer dolor est, commodo ut 
    sagittis vitae, egestas at augue. Suspendisse id nulla 
    ac urna vestibulum mattis. 
   </p>
  </div>
 
  <div class="pin">
   <img src="http://cssdeck.com/uploads/media/items/6/6f3nXse.png" />
   <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Sed feugiat consectetur pellentesque. Nam ac elit risus, 
    ac blandit dui. Duis rutrum porta tortor ut convallis.
   </p>
  </div>
 </div>
</div>

Please take a few minutes to explain your answer. – DᴀʀᴛʜVᴀᴅᴇʀ Aug 05 '16 at 18:09 — DᴀʀᴛʜVᴀᴅᴇʀ, Aug 05 '16 at 18:09

score -1 · Answer 2 · answered Jul 20 '16 at 07:56

-1

You can do it by bootstrap click here

answered Jul 20 '16 at 07:56

Head In Cloud

1,901
1
6
10

still in alpha. I don't think it is good idea to use it in a production site. – Samia Ruponti Jul 20 '16 at 07:58

how to set grid in css like pinterest

2 Answers2