- คณะทำงาน CSS ได้ประกาศร่างฉบับทำงานสาธารณะฉบับแรกของ CSS Grid Layout Module Level 3 หรือที่เรียกว่าเลย์เอาต์ CSS แบบก่ออิฐ (Masonry Layout)
- ร่างฉบับนี้นำเสนอเลย์เอาต์แบบก่ออิฐในฐานะความสามารถที่มีมาในตัวของ CSS โดยมีรูปแบบไวยากรณ์ที่เป็นไปได้ 2 แบบ คือไวยากรณ์แบบผสานกับกริด และไวยากรณ์แบบแยกอิสระจากกริด
- หวังว่าการเผยแพร่ร่างฉบับนี้จะช่วยกระตุ้นการอภิปรายเกี่ยวกับข้อดีเชิงเปรียบเทียบของรูปแบบไวยากรณ์ทั้งสองแบบ
การตัดสินใจของคณะทำงาน CSS
- คณะทำงาน CSS มีมติให้นำการกำหนดขนาดแทร็กแบบผสมเต็มรูปแบบมาใช้กับโมเดลเลย์เอาต์นี้
- นั่นหมายความว่ารายการแทร็กที่เป็นไปได้ทั้งหมดซึ่งสามารถแสดงได้ใน CSS Grid Layout จะสามารถใช้ได้กับเลย์เอาต์แบบก่ออิฐด้วย
- สิ่งนี้ทำให้โมเดลเลย์เอาต์พื้นฐานของข้อเสนอทั้งสองฉบับถูกรวมเข้าด้วยกัน ดังนั้นรูปแบบไวยากรณ์ทั้งสองแบบจึงมีความสามารถเทียบเท่ากันโดยพื้นฐานสำหรับเลย์เอาต์แบบก่ออิฐ (ยังมีประเด็นที่ยังไม่ได้ข้อยุติบางส่วนเกี่ยวกับความแตกต่างของค่าเริ่มต้น)
- เพื่อแก้ปัญหาด้านประสิทธิภาพที่เกี่ยวข้องกับการกำหนดขนาดแทร็กแบบผสม ร่างฉบับนี้ได้อธิบายภาพรวมของการเพิ่มประสิทธิภาพบางอย่างในโมเดลเลย์เอาต์ และนำกฎเชิงประสบการณ์แบบเรียบง่ายบางส่วนมาใช้กับ subgrid เป็นต้น
2 ความคิดเห็น
Masonry Layout มีคำอธิบายไว้อย่างดีใน MDN
https://developer.mozilla.org/en-US/docs/…
ทีม WebKit เองก็เคยเขียนโพสต์ขอความช่วยเหลือเกี่ยวกับเรื่องนี้ไว้เมื่อเดือนเมษายน
CSS Grid Level 3 หรือเลย์เอาต์ "Masonry" ขอความช่วยเหลือในการสร้าง
บทความนี้มีภาพอธิบายเลย์เอาต์ Masonry โดยอิงจากตัวอย่างรวมอยู่ด้วย ลองดูประกอบได้