title: Image Gallery in Masonry Grid with random width & random height
body: <p><img src="https://i.stack.imgur.com/OS3bZ.jpg" alt="Masonary"></p>
  
  <p>This is my gallery layout. I wanted to arrange images in the above grid style and responsive. It has random width &amp; random height.  But all of the images i have is vertical. So I need help to work on this. </p>
  
  <p>Thanks in advance. </p>
  
  <p>I tried using CSS column-count. This is what I got 
  <img src="https://i.stack.imgur.com/91Bah.png" alt="enter image description here"></p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;ul id="myContent"&gt;             
          &lt;li&gt;&lt;img src="images/1.jpg" alt=""&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/2.jpg" alt=""&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/3.jpg" alt=""&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/4.jpg" alt=""&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/5.jpg" alt=""&gt;&lt;/li&gt;
          &lt;li&gt;&lt;img src="images/6.jpg" alt=""&gt;&lt;/li&gt;
  
  
      &lt;/ul&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container {
      width: 1000px;
      margin: 0 auto;
  }
  
  #myContent {
      -moz-column-count: 2;
      -moz-column-gap: 10px;
      -webkit-column-count: 2;
      -webkit-column-gap: 10px;
      column-count: 2;
      column-gap: 10px;
      width: 800px;
      list-
  }
  
  #myContent img{
      display: inline-block;
      margin-bottom: 0px;
     width:auto;
  }
  #myContent li:nth-child(n+1):nth-child(-n+4) {text-align:right;}
  #myContent li:nth-child(n+5):nth-child(-n+6){text-align:left;}
  </code></pre>
  
  <p>How can I place/arrange the images dynamically? Is there any other way?</p>