CSS Masonry Generator: สร้างเลย์เอาต์ Masonry สไตล์ Pinterest ด้วย CSS ล้วน

เลย์เอาต์แบบ masonry หรือสไตล์ "กำแพงอิฐ" ที่ทำให้ Pinterest มีเอกลักษณ์ ไม่เคยเป็นเรื่องง่ายสำหรับนักพัฒนาเว็บ เพราะ CSS grid ทั่วไปจะบังคับให้ทุกแถวสูงเท่ากัน เมื่อไอเทมมีความสูงต่างกันก็เกิดช่องว่างที่ดูไม่เรียบร้อย และวิธีแก้แบบดั้งเดิมคือต้องใส่ JavaScript library เพิ่มเพื่อจัดวางกล่องให้ชิดกัน เครื่องมือ CSS Masonry Generator จาก Online Tools Forge เสนอทางเลือกที่ดีกว่า นั่นคือออกแบบเลย์เอาต์แบบภาพ (visual) แล้วรับโค้ด HTML และ CSS ที่สะอาด ซึ่งสร้างจาก property grid-template-rows: masonry พร้อม fallback แบบ multi-column สำหรับเบราว์เซอร์รุ่นเก่า

เนื่องจากทุกอย่างทำงานในเบราว์เซอร์ของคุณ คุณจึงปรับจำนวนคอลัมน์ ระยะ gap และจำนวนไอเทมได้ทันที พร้อมดู live preview อัปเดตแบบเรียลไทม์ เมื่อพอใจแล้วก็ก็อปปี้โค้ดที่สร้างไว้ไปใช้ในโปรเจกต์ได้เลย ไม่ต้องสมัครสมาชิก ไม่มี dependency และไม่มีการผูกกับเฟรมเวิร์กใด

ในบทความนี้เราจะพาไปดูว่าทำไมเครื่องมือนี้ถึงคุ้มค่าที่จะใช้ วิธีใช้งานทีละขั้นตอนตั้งแต่ผืนผ้าใบเปล่าจนถึงโค้ดพร้อมใช้งานภายใน 5 ขั้นตอน และหลักการทำงานของ native CSS masonry เบื้องหลัง รวมถึงข้อแลกเปลี่ยนที่ควรเข้าใจก่อนนำไปใช้งานจริง

ทำไมต้องใช้ CSS Masonry Generator?

• Masonry แท้ๆ โดยไม่ต้องใช้ JavaScript — โค้ดที่ได้ใช้ grid-template-rows: masonry ทำให้เบราว์เซอร์จัดไอเทมลงคอลัมน์เองตามธรรมชาติ ไม่ต้องพึ่ง layout library ไม่มีต้นทุน runtime และไม่เกิด layout shift จากสคริปต์ที่วัดความสูงหลังหน้าจอแสดงผล
• เห็นผลลัพธ์ทันทีแบบ visual — แทนที่จะเดาค่าในโค้ด คุณปรับตัวควบคุมแล้วเห็นเลย์เอาต์ตอบสนองแบบเรียลไทม์ ซึ่งเร็วกว่าวงจร save แล้ว refresh หลายเท่า
• ปรับความหนาแน่นได้อิสระ — ปรับได้ทั้งจำนวนคอลัมน์, gap และจำนวนไอเทม เลือกได้ตั้งแต่แกลเลอรี 3 คอลัมน์ที่ชิดกันจนถึงผนังการ์ด 5 คอลัมน์ที่โปร่งสบาย
• Degradation อย่างสวยงาม — เบราว์เซอร์ที่ยังไม่รองรับ masonry แบบ native จะได้ fallback แบบ multi-column ที่เรียบร้อย เลย์เอาต์จะไม่พังหายเป็นคอลัมน์เดียวยาวเหยียด
• โค้ดก็อปปี้แล้วใช้ได้จริง — เครื่องมือสร้าง HTML และ CSS ที่สะอาด อ่านง่าย ใส่ลง static site, React component หรือ template ของ CMS ได้ทันทีโดยไม่ต้องเก็บกวาด
• ฟรีและเป็นส่วนตัว — ทุกอย่างประมวลผลในเบราว์เซอร์ของคุณ ไม่มีการอัปโหลดข้อมูลใดๆ และไม่ต้องสมัครบัญชี

ฟีเจอร์หลัก

จุดที่น่าสังเกตเพิ่มเติมมีสามข้อ:

• การผสม masonry แบบ native เข้ากับ fallback หมายความว่าคุณเขียนเลย์เอาต์เพียงครั้งเดียว แล้วปล่อยให้เบราว์เซอร์เลือกวิธีแสดงผลที่ดีที่สุดที่มี — นี่คือ progressive enhancement ตามตำรา
• โค้ด CSS ที่ได้สั้นมาก มี declaration เพียงไม่กี่บรรทัด จึงแทบไม่เพิ่มน้ำหนักหน้าเว็บเมื่อเทียบกับ JavaScript library สำหรับ masonry ทั่วไป
• ตัวควบคุมจำนวนไอเทมมีประโยชน์ตอนทดสอบ ลองสร้างไอเทมน้อยๆ เพื่อเช็คระยะห่างก่อน แล้วค่อยเพิ่มจำนวนมากขึ้นเพื่อดูว่าเลย์เอาต์รับมือกับผนังเต็มๆ ได้ดีแค่ไหน

วิธีใช้งาน CSS Masonry Generator

1. ตั้งค่าคอลัมน์และ gap — เปิดเครื่องมือแล้วเลือกจำนวนคอลัมน์และระยะห่างระหว่างไอเทม ช่วง 3-5 คอลัมน์กับ gap 12-24px เหมาะกับผนังรูปภาพส่วนใหญ่ ส่วน gap ที่กว้างขึ้นจะให้ความรู้สึกผ่อนคลายกับการ์ดที่เน้นข้อความ
2. เพิ่มไอเทม — กำหนดจำนวนไอเทมให้เครื่องมือสร้าง tile ตัวอย่าง แล้วนึกภาพว่าคุณจะใส่คอนเทนต์จริงแทนที่แต่ละก้อน ความสูงที่ไม่เท่ากันคือจุดที่ทำให้ masonry เด่นที่สุด
3. ดูตัวอย่างแบบสด — ปรับค่าไปมองไปที่ live preview พร้อมกัน เพราะอัปเดตทันที คุณจึงเทียบเลย์เอาต์แบบชิดกับแบบโปร่งได้ในไม่กี่วินาทีแล้วเลือกจุดที่ลงตัว
4. เช็ค fallback — ดูผลลัพธ์ fallback แบบ multi-column และคิดถึงลำดับการอ่านของคอนเทนต์เมื่อไอเทมไหลลงคอลัมน์แรกจนเต็มก่อนขึ้นคอลัมน์ถัดไป รายละเอียดอยู่ในหัวข้อด้านล่าง
5. ก็อปปี้ HTML และ CSS — หยิบ markup และสไตล์ที่สร้างไว้ วางลงในโปรเจกต์ แล้วเปลี่ยน tile ตัวอย่างเป็นคอนเทนต์จริงของคุณ

Masonry แบบ Native และ Fallback แบบ Multi-Column

หัวใจของโค้ดที่สร้างขึ้นคือ grid-template-rows: masonry ใน grid ปกติ แถวจะเป็น track ที่ตายตัว ไอเทมทุกตัวในแถวเดียวกันจะสูงเท่ากัน การ์ดที่เตี้ยจึงเปลืองพื้นที่ข้างการ์ดที่สูง ค่า masonry จะบอกให้เบราว์เซอร์ผ่อนเงื่อนไขนั้น แล้วจัดไอเทมแต่ละตัวลงคอลัมน์ที่มีพื้นที่เหลือมากที่สุด ผลลัพธ์คือเลย์เอาต์แน่นทึบแบบขั้นบันได — นั่นคือ masonry แท้ที่คำนวณโดย layout engine ไม่ใช่สคริปต์

แต่เรื่องการรองรับของเบราว์เซอร์คือข้อจำกัดที่ต้องพูดกันตรงๆ ฟีเจอร์นี้ยังเป็นแบบ experimental ณ ตอนนี้ยังไม่มีเบราว์เซอร์เวอร์ชันเสถียรตัวใดปล่อยออกมา แม้ Firefox จะทำ prototype ไว้เบื้องหลัง flag และ Chrome ก็กำลังศึกษาแนวทางของตัวเองอยู่ นั่นแหละคือเหตุผลที่เครื่องมือจับ masonry มาจับคู่กับ fallback แบบ multi-column ด้วย column-count และ break-inside: avoid เบราว์เซอร์ที่ไม่เข้าใจ masonry จะแสดงไอเทมเป็นคอลัมน์แนวตั้งที่สมดุลแทนกองเดียวยาว ผลลัพธ์ทางสายตาใกล้เคียงกันมาก เพราะคุณยังได้ tile สูงต่ำไม่เท่ากันในคอลัมน์ที่เคียงข้างกัน

fallback มีความต่างเชิงพฤติกรรมหนึ่งข้อที่ควรรู้: multi-column จะเติมคอลัมน์แรกจากบนลงล่างให้เต็มก่อน แล้วค่อยเริ่มคอลัมน์ที่สอง ลำดับการอ่านจึงเป็นแบบลงก่อนค่อยข้าม ขณะที่ masonry แท้จะวางไอเทมข้ามแถวก่อน รายการที่เรียงหมายเลข 1, 2, 3 จึงอ่านซ้ายไปขวา ถ้าลำดับสำคัญ เช่น ขั้นตอนที่มีหมายเลขหรือฟีดตามเวลา ควรทดสอบดูว่า fallback เรียงคอนเทนต์ของคุณอย่างไร

ระยะ gap และจำนวนคอลัมน์ก็แลกเปลี่ยนกันต่างกันในแต่ละโหมด gap แคบกับคอลัมน์เยอะดูดีใน masonry แต่ค่าเดียวกันใน fallback จะได้คอลัมน์แคบแบบหนังสือพิมพ์ การขยับ gap ให้กว้างขึ้นเล็กน้อยช่วยให้ fallback อ่านง่ายขึ้น live preview ของเครื่องมือช่วยให้คุณหาค่าที่ใช้ได้ดีทั้งสองโหมดได้ง่ายขึ้นมาก

สุดท้าย เมื่อไรที่ควรพึ่ง JavaScript library อย่าง Masonry.js บ้าง? ถ้าคุณต้องการรับประกันลำดับซ้ายไปขวาแบบเดียวกันทุกเบราว์เซอร์ ต้องการ animation ตอน filter หรือ resize หรือต้องรองรับเบราว์เซอร์เก่ามากด้วยความเท่ากันระดับพิกเซล สคริปต์ก็ยังคุ้มค่า แต่สำหรับโปรเจกต์ส่วนใหญ่ native masonry บวก fallback ที่แข็งแรงคือทางเลือกที่เบาและเร็วกว่า และจะดีขึ้นเองเรื่อยๆ เมื่อเบราว์เซอร์ปล่อยรองรับอย่างเป็นทางการ

ตัวอย่างการใช้งานจริง

แกลเลอรีรูปภาพ

รูปถ่ายมักไม่มีอัตราส่วนภาพเท่ากัน นั่นคือเหตุผลที่ grid แบบเท่ากันทุกช่องมักทำให้ผิดหวัง แกลเลอรีแบบ masonry ให้ทุกรูปเต็มความกว้างของคอลัมน์โดยไม่ต้องครอป รูปแนวตั้งจึงอยู่ชิดข้างรูปแนวนอนได้พอดี เริ่มต้นที่ 4 คอลัมน์กับ gap ปานกลางสำหรับงานภาพ portfolio แล้วลดเหลือ 3 คอลัมน์ถ้าอยากได้ภาพใหญ่ขึ้น

ผนังการ์ดบทความ

เว็บคอนเทนต์ที่มีการ์ดสูงต่ำไม่เท่ากัน บางโพสต์มีรูปภาพ บางโพสต์เป็นข้อความล้วน จะได้ประโยชน์จากพฤติกรรมการจัดวางของ masonry เพราะการ์ดที่สั้นจะไม่ทำให้ grid เกิดรู จับคู่เลย์เอาต์กับป้ายหมวดหมู่ และรักษาความสูงของการ์ดให้ต่างกันพอประมาณ ผนังการ์ดจะดูตั้งใจจัดวางมากกว่าดูรุงรัง

พอร์ตโฟลิโอ

นักออกแบบและเอเจนซีมักอยากได้ tile ผลงานที่สูงต่างกันเพื่อสื่อถึงความหลากหลาย พร้อมคงหน้าเว็บให้แน่นและสแกนง่าย พอร์ตโฟลิโอแบบ masonry 3 คอลัมน์ gap กว้างหน่อย และเอฟเฟกต์ hover บนแต่ละ tile ให้ความรู้สึกเหมือนแกลเลอรีได้โดยไม่ต้องเขียน JavaScript แม้แต่บรรทัดเดียว

หน้าแสดงสินค้า

มาร์เก็ตเพลสและร้านค้าออนไลน์ใช้ masonry กับแคตตาล็อกที่เน้นภาพได้ดีมาก ไม่ว่าจะเป็นงานศิลปะ เฟอร์นิเจอร์ หรือสินค้าแฮนด์เมดที่รูปสินค้ามีรูปทรงต่างกัน ควรคงข้อความ overlay ให้น้อยและสม่ำเสมอ เพื่อให้ราคาและชื่อสินค้ายังสแกนได้ง่ายท่ามกลางคอลัมน์แบบขั้นบันได

แนวทางปฏิบัติที่ดีที่สุด

• ใส่ fallback ไปด้วยเสมอ — ณ ปัจจุบันยังไม่มีเบราว์เซอร์เสถียรตัวใดรับประกัน masonry แบบ native จึงควรถือว่า fallback แบบ multi-column เป็นส่วนหนึ่งของดีไซน์ ไม่ใช่ของแถมที่ใส่ทีหลัง
• คงโทนของไอเทมให้ใกล้กัน — masonry รับมือความสูงที่ต่างกันได้อย่างสวยงาม แต่สี ความหนาของเส้นขอบ และฟอนต์ที่ต่างกันมากเกินไปจะทำให้ผนังดูสุ่มมั่ว จำกัดพาเลตสีแล้วให้ความสูงเป็นตัวสร้างความต่างแทน
• ทดสอบลำดับคอนเทนต์เพื่อการอ่าน — จำไว้ว่า fallback จะอ่านลงตามคอลัมน์ ให้วางไอเทมที่สำคัญไว้ต้นๆ แล้วเช็คทั้งสองโหมดการแสดงผลก่อนเปิดตัวจริง
• จับคู่กับ lazy loading — ผนัง masonry ที่เน้นรูปจะหนักเร็วมาก ใช้ loading="lazy" แบบ native กับรูปภาพ เพื่อไม่ให้ tile ที่อยู่นอกจอทำให้การแสดงผลครั้งแรกช้าลง
• จับ gap เข้ากับ spacing scale — ใช้ค่า gap เดียวกับที่ design system ใช้ในส่วนอื่น เพื่อให้บล็อก masonry รู้สึกเป็นชิ้นเดียวกับผลิตภัณฑ์เดียวกัน
• หลีกเลี่ยงการล็อกลำดับแนวนอน — ถ้าไอเทมที่ 3 ต้องอยู่ทางขวาของไอเทมที่ 2 ทุกเบราว์เซอร์ การจัดวาง masonry แบบ native อาจไม่รับประกัน ให้เรียงคอนเทนต์ใหม่หรือใช้ grid ปกติแทน

พร้อมลองใช้จริงหรือยัง? เปิด CSS Masonry Generator ตั้งค่าคอลัมน์ gap และจำนวนไอเทม แล้วก็อปปี้เลย์เอาต์ที่เสร็จแล้วของคุณภายในไม่ถึงหนึ่งนาที ไม่ต้องสมัคร ไม่ต้องติดตั้ง และไม่ต้องใช้ JavaScript เลย

เครื่องมือที่เกี่ยวข้องที่คุณอาจชอบ:

• Bento Grid Generator — ออกแบบเลย์เอาต์ bento-box สมัยใหม่ด้วย CSS grid ที่สะอาดตา
• Flexbox Generator — สร้างแถว คอลัมน์ และการจัดวาง flexbox แบบภาพ
• CSS Spinner Generator — สร้าง loading spinner ด้วย CSS ล้วนสำหรับหน้าเว็บของคุณ

ขอให้สนุกกับการสร้างเว็บไซต์!

คำถามที่พบบ่อย

ถ: สร้างเลย์เอาต์ masonry ด้วย CSS ล้วนโดยไม่ใช้ JavaScript ได้จริงหรือ? ตอบ: ได้ครับ CSS Masonry Generator สร้างโค้ดจาก grid-template-rows: masonry ซึ่งให้เบราว์เซอร์จัดไอเทมลงคอลัมน์เองตามธรรมชาติ เนื่องจากการรองรับยังเป็นแบบ experimental เครื่องมือจึงแถม fallback แบบ multi-column ให้ด้วย เพื่อให้ทุกเบราว์เซอร์ได้เลย์เอาต์ที่ดูดี

ถ: เบราว์เซอร์ตัวไหนรองรับ grid-template-rows: masonry แล้วบ้าง? ตอบ: ณ ตอนที่เขียนบทความนี้ยังไม่มีเบราว์เซอร์เวอร์ชันเสถียรตัวใดปล่อยฟีเจอร์นี้ออกมา Firefox ทำ prototype ไว้เบื้องหลัง flag และ Chrome กำลังทดลองแนวทางของตัวเอง โค้ดที่สร้างจึงออกแบบตามหลัก progressive enhancement คือเบราว์เซอร์ที่เข้าใจจะได้ masonry แท้ ส่วนที่เหลือได้ fallback แบบ multi-column

ถ: masonry ต่างจาก CSS grid ปกติอย่างไร? ตอบ: grid ปกติกำหนดให้ทุกแถวสูงเท่ากัน ไอเทมที่เตี้ยจึงทิ้งพื้นที่ว่างข้างไอเทมที่สูงกว่า ส่วน masonry จะผ่อนเงื่อนไขของแถวแล้วจัดไอเทมแต่ละตัวลงคอลัมน์ที่พอดีที่สุด ช่วยกำจัดพื้นที่แนวตั้งที่เสียเปล่าไปได้เกือบทั้งหมด

ถ: เอาโค้ดที่สร้างไปใช้กับ React, Next.js หรือ WordPress ได้ไหม? ตอบ: ได้แน่นอน ผลลัพธ์เป็น HTML และ CSS ล้วนไม่มี dependency คุณจึงวางลง component, static site หรือ WordPress template ได้ทันที เพียงเปลี่ยน tile ตัวอย่างเป็นคอนเทนต์ของคุณเองเท่านั้น