title: I want to have pinterest.com style template
body: <p>I want to have pinterest.com kind of css template. I got that. </p>
  
  <p>But, some of my widgets got cut and coming in next line. I mean, half of the widget is coming in one row and another half is coming in next row. </p>
  
  <p>And i want to place my widgets horizontally. not vertically.</p>
  
  <p>Advanced thanks for response.</p>
  
  <p>See my css and html code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper-main{
       column-count: 4;
       column-gap: 30px;
       column-fill: auto;
       overflow: hidden;
       width: 1200px;
       margin: 0 auto;
       padding-bottom: 250px;
      }
  
      .widget-main{
       background-color: #6d6d6d;
       box-shadow: 1px 1px 8px #cfcfcf;
       margin-bottom: 20px;
       display: block;
       min-height: 250px;
      }
  
      .widget-blue{
       background-color: #3ec6e0;
      }
  
      .widget-seagreen{
       background-color: #56d6be;
      }
  
      .widget-red{
       background-color: #e2546c;
      }
  
      .widget-yellow{
       background-color: #fc8b01;
      }
  
      .widget-green{
       background-color: #81b847;
      }
  
      .widget-blue2{
       background-color: #2f99b3;
      }
  
      .widget-mud{
       background-color: #dbae53;
      } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;body&gt;
      &lt;div id="wrapper-main"&gt;
     
       &lt;div class="widget-main"&gt;Widget 01&lt;/div&gt;
       &lt;div class="widget-main widget-blue"&gt;Widget 02&lt;/div&gt;
       &lt;div class="widget-main  widget-seagreen"&gt;Widget 03&lt;/div&gt;
       &lt;div class="widget-main  widget-mud"&gt;Widget 04&lt;/div&gt;
       &lt;div class="widget-main  widget-red"&gt;Widget 05&lt;/div&gt;
       &lt;div class="widget-main  widget-yellow"&gt;Widget 06&lt;/div&gt;
       &lt;div class="widget-main  widget-green"&gt;Widget 07&lt;/div&gt;
       &lt;div class="widget-main  widget-blue2"&gt;Widget 08&lt;/div&gt;
       &lt;div class="widget-main widget-blue"&gt;Widget 09&lt;/div&gt;
       &lt;div class="widget-main  widget-seagreen"&gt;Widget 10&lt;/div&gt;
       &lt;div class="widget-main  widget-mud"&gt;Widget 11&lt;/div&gt;
       &lt;div class="widget-main  widget-red"&gt;Widget 12&lt;/div&gt;
       &lt;div class="widget-main  widget-yellow"&gt;Widget 13&lt;/div&gt;
       &lt;div class="widget-main  widget-green"&gt;Widget 14&lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>