Cara Membuat Masonry Layout tanpa Jquery

Masonry - adalah tata letak grid yand didasarkan pada kolom. Tidak seperti layout lainnya, baris dan tinggi tidak memiliki nilai yang tetap. Pada dasarnya tata letak Masonry mengoptimalkan penggunaan ruang didalam halaman web. Layout jenis ini tidak membutuhkan pembatas untuk menjaga struktur dan tata letak .

Contoh :

Sekarang mari kita mulai , pertama mari kita buat strktur HTML-nya 

<div class="konten">

     <div class="konten-box">

            <div class="item-konten">

                <ul>

                      <div class="isi">

                            <li>Judul disini<li/>

                            <li><img ="#" /></li>

                            <li>Dekripsi yang disini</li>

                            <li>Footer konten</li>

                      </div>

                 </ul>

               </div>

          </div>

  </div>

lalu kita tambahkan style

CSS


.konten{
width:100%;
height:auto;
}

.konten-box{
padding:50px 50px;
}

.item-konten ul{
-webkit-column-count:4;
-webkit-column-gap:1em;
}

.isi img{
width:100%;
}

.isi{
width:100%;
display:inline-block;
background:#e51b24;
margin-top:10px;
    text-align:justify;
}

.isi li span{
font-weight:bold;
color:#fff;
padding:10px;
}

.isi li:nth-child(3){
font-weight:bold;
color:#fff;
padding:5px;
}

.isi li:nth-child(4){
color:#fff;
padding:5px;
font-size:12px;
}

.isi li:nth-child(4){
border-top:1px solid rgba(255,255,255,.30);
}

Tada sudah selesai, bagaimana gan?mudah bukan ?
bila agan - agan ingin melihat demonya silahkan klik disini atau download
~ Terima kasih