ทำเลย์เอาท์แนว Masonry ด้วย CSS

แนวทางการทำเลย์เอาท์แนว Masonry  (ก่ออิฐ แบบเว็บ pinterest) ด้วยโค้ด CSS

ตัวอย่างโค้ด HTML

<div class=”masonry”>   
<div class=”item”>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>   
<div class=”item”>.
..
</div>   
…   
…   
<div class=”item”>

</div>
</div>

ตัวอย่างโค้ด CSS

.masonry {
/* Masonry container */   
column-count: 4;   
column-gap: 1em;
}
.item {
/* Masonry bricks or child elements */   
background-color: #eee;   
display: inline-block;   
margin: 0 0 1em;   
width: 100%;
}

ที่มา

w3bits.com