แนวทางการทำเลย์เอาท์แนว 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%;
}
ที่มา
Narongchai Suphiratwanich (K)
นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ SeedWebs & SeedThemes และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย