title: How can I style a list of images similar to a Pinterest board?
body: <p>I have a list of images. I'm trying to get them to layout similar to a Pintrest board. Like in this example image below:
  <img src="https://i.stack.imgur.com/3zHFc.jpg" alt="enter image description here"></p>
  
  <hr>
  
  <p>However the only result I'm able to achieve is this:</p>
  
  <p><img src="https://i.stack.imgur.com/pdUSE.jpg" alt="enter image description here"></p>
  
  <p>Here is what I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.continut {
    margin: 0 auto;
    width: 990px;
  }
  .rand {
    margin: 0 5px;
  }
  .box-img {
    position: relative;
    float: left;
    width: 25%;
  }
  .box-img  img {
    border: 0;
    max-width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;div class="continut"&gt;
        &lt;div class="rand"&gt;
          &lt;a class="box-img"&gt;&lt;img src="http://40.media.tumblr.com/c8e11d8c0279c6b5cb4fd6d2b7278149/tumblr_nck3r1cGTy1qe4p6do1_1280.jpg"&gt;&lt;/a&gt;
          &lt;a class="box-img"&gt;&lt;img src="http://40.media.tumblr.com/37f245ed9f4f4088b0d41c743d0f70c2/tumblr_mrp0r9nsak1rn86uco1_1280.jpg"&gt;&lt;/a&gt;
          &lt;a class="box-img"&gt;&lt;img src="http://40.media.tumblr.com/9233cef94eb89f94343b9d5a2a890e5c/tumblr_mt35f2lHx01qgu2wio1_1280.jpg"&gt;&lt;/a&gt;
          &lt;a class="box-img"&gt;&lt;img src="http://41.media.tumblr.com/a7950321c8cb51ae537f6ac1c5dd796d/tumblr_nghriwuQoi1r05o81o1_1280.jpg"&gt;&lt;/a&gt;
          &lt;a class="box-img"&gt;&lt;img src="http://40.media.tumblr.com/f4c49ca91e71de45275ec71926deda22/tumblr_nfx14oxXy01tpw2ero1_1280.jpg"&gt;&lt;/a&gt;
          &lt;a class="box-img"&gt;&lt;img src="http://40.media.tumblr.com/8615093ac8f3326e3e3715e4cd289de8/tumblr_nh4472KKyJ1qllucco1_1280.jpg"&gt;&lt;/a&gt;
          &lt;a class="box-img"&gt;&lt;img src="http://40.media.tumblr.com/34b7afdd5501ba317ab047560fb96306/tumblr_nb6ti3I0KM1rpouqmo1_1280.jpg"&gt;&lt;/a&gt;
          &lt;a class="box-img"&gt;&lt;img src="http://41.media.tumblr.com/f2be3ed1e09785589de69142494736cd/tumblr_ngjlr9ftiB1rp1s63o1_1280.jpg"&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>