Styling Image List Pinterest Like Using CSS

I have developing wordpress gallery plugin. It was decided when no find the gallery with pinterest style. When i found, it was premium plugin.

The first step is make list of image like pinterest style. From Dudley Storey post, i tried to make my needs. Okey I try to copy all the code there with change to compatible with firefox ( -moz- ) and chrome ( -webkit- )

 <div id="columns">  
   <figure>  
     <a href="images/image-gallery-up1.jpg" title="Cinderella wearing European fashion of the mid-1860’s" data-gallery><img src="images/image-gallery-up1.jpg"></a>  
     <figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>  
   </figure>  
   <figure>  
     <a href="images/image-gallery-up-jungle.jpg" title="Cinderella wearing European fashion of the mid-1860’s" data-gallery><img src="images/image-gallery-up-jungle.jpg"></a>  
     <figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>  
   </figure>  
   <figure>  
     <img src="images/image-gallery-up-jungle.jpg">  
     <figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>  
   </figure>  
   <figure>  
     <img src="images/image-gallery-up1.jpg">  
     <figcaption>Cinderella wearing European fashion of the mid-1860’s</figcaption>  
   </figure>  
   <figure>  
     <img src="images/image-gallery-up-jungle.jpg">  
     <figcaption>Rapunzel, clothed in 1820’s period fashion</figcaption>  
   </figure>  
 </div>  

And the code of CSS is

 #columns {  
      -webkit-column-width:200px;  
      -moz-column-width: 200px;  
      column-width: 200px;  
      -moz-column-gap: 5px;  
      -webkit-column-gap: 5px;  
      column-gap: 5px;  
      width: 90%;  
      max-width: 1100px;  
      margin: 50px auto;  
 }  
 div#columns figure {  
      background: #fefefe;  
      border: 2px solid #fcfcfc;  
      box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);  
      margin: 0 2px 5px;  
      padding: 5px;   
      padding-bottom: 10px;  
      transition: opacity .4s ease-in-out;  
      column-break-inside: avoid;  
      display: inline-block;  
 }  
 div#columns figure img {  
      width:100%; height: auto;  
      border-bottom: 1px solid #ccc;  
      padding-bottom: 15px;  
      margin-bottom: 5px;  
 }  
 @media screen and (max-width: 750px) {  
      #columns { -webkit-column-gap: 0px; }  
      #columns figure { width: 100%; }  
 }  

The idea are on the colomn-width and colomn-gap. Final result below.

Problem solve.