ทีละขั้น: ช่วยเราสร้าง CSS Masonry

Patrick Brosset

Alison Maher

เผยแพร่: 23 กรกฎาคม 2025 อัปเดตล่าสุด: 13 กุมภาพันธ์ 2026

คำเตือน: ไวยากรณ์ที่ล้าสมัย: ตัวอย่างโค้ดในโพสต์นี้อิงตามฉบับร่างแรกๆ ของสิ่งที่ปัจจุบันเรียกว่า "เลย์เอาต์เลนตารางกริด" ดูไวยากรณ์เวอร์ชันล่าสุดได้ที่ข้อกำหนด css-grid-3

ทีม Microsoft Edge และ Google Chrome ยินดีที่จะประกาศว่า CSS Masonry พร้อมสำหรับการทดสอบของนักพัฒนาซอฟต์แวร์ในช่วงแรกจาก Chrome และ Edge 140 แล้ว

เนื่องจากปัญหาที่ยังไม่ได้รับการแก้ไขเกี่ยวกับข้อกำหนดและไวยากรณ์ของ CSS Masonry ยังคงมีอยู่ ความคิดเห็นของคุณจึงมีความสำคัญอย่างยิ่งในการช่วยเรากำหนดรูปแบบสุดท้ายของ API ลองใช้ฟีเจอร์นี้แล้วบอกเราว่าคุณคิดอย่างไร

ทดสอบ CSS Masonry ใน Chromium วันนี้

วิธีทดสอบ CSS Masonry วันนี้

1. ใช้ Chrome หรือ Edge 140 ขึ้นไป (หรือเบราว์เซอร์ที่ใช้ Chromium อื่นๆ ที่มีเวอร์ชันตรงกัน)
2. ไปที่ about:flags ในแท็บใหม่
3. ค้นหา "เลย์เอาต์ CSS Masonry"
4. เปิดใช้แฟล็ก
5. รีสตาร์ทเบราว์เซอร์

เมื่อเปิดใช้ฟีเจอร์นี้ คุณจะเห็นการทำงานของฟีเจอร์ได้โดยดูการสาธิตของ Microsoft Edge (ดูซอร์สโค้ดของการสาธิต) หรืออ่านต่อเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์และไวยากรณ์ที่ใช้ได้

งานก่ออิฐคืออะไร

CSS Masonry เป็นโหมดเลย์เอาต์ที่ช่วยให้คุณสร้างการจัดเรียงรายการแบบอิฐได้ในลักษณะที่ทำได้ยากด้วย CSS Grid, Flexbox หรือเลย์เอาต์หลายคอลัมน์

คุณสามารถใช้ CSS Masonry เพื่อจัดเรียงรายการในรูปแบบคอลัมน์หรือแถว โดยวางรายการไว้ภายในคอลัมน์หรือแถวเหล่านั้นในลักษณะที่ยุบได้

ลองนึกภาพว่าการจัดวางแบบก่ออิฐเป็นเหมือนทางหลวง ซึ่งข้อจำกัดเพียงอย่างเดียวคือจำนวนและขนาดของเลนขับรถที่แตกต่างกัน ภายในเลน ยานพาหนะจะมีความยาวเท่าใดก็ได้ตามต้องการ และพยายามอยู่ใกล้จุดหมายมากที่สุดเสมอ ซึ่งก็คือจุดเริ่มต้นของเลย์เอาต์แบบก่ออิฐ

รายการเลย์เอาต์จะถูกจำกัดในทิศทางเดียวเท่านั้นและสามารถขยายได้อย่างอิสระในอีกทิศทางหนึ่ง โดยไม่คำนึงถึงรายการอื่นๆ ที่อยู่ใกล้เคียง masonry แตกต่างจาก grid ตรงที่แทร็กจะกำหนดไว้ในทิศทางเดียวเท่านั้น

ในเลย์เอาต์แบบก่ออิฐ ลำดับภาพของรายการมีความสำคัญน้อยกว่าการออกแบบขั้นสุดท้าย Masonry ช่วยให้คุณใช้พื้นที่ว่างที่มีอยู่ให้เกิดประโยชน์สูงสุด ไม่ว่าคุณจะมีรายการใดก็ตาม ซึ่งทำให้เป็นตัวเลือกที่ยอดเยี่ยมสำหรับหน้าเว็บที่เน้นภาพเป็นหลัก และลำดับภาพของเนื้อหาไม่สำคัญเท่ากับผลลัพธ์สุดท้าย

แง่มุมที่น่าสนใจอย่างหนึ่งของ Masonry คือยังช่วยให้รายการขยายได้หลายแทร็ก เช่นเดียวกับ Grid เมื่อเกิดกรณีดังกล่าว ระบบจะยังคงจัดวางรายการในลักษณะที่เติมเต็มพื้นที่ว่างให้ได้มากที่สุด

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

ต่อไปนี้เป็นตัวอย่างอื่นๆ ของสิ่งที่สามารถใช้การจัดวางแบบ Masonry ได้

เลย์เอาต์บล็อกที่แสดงภาพปกและคำอธิบายของแต่ละโพสต์

ดูเดโมของบล็อกได้ที่นี่

เว็บไซต์ข่าวที่บทความปรากฏในคอลัมน์ โดยบางบทความกว้างกว่าบทความอื่นๆ และรูปภาพหลักครอบคลุมความกว้างทั้งหมดของหน้า

ดูเดโมของ Sites แบบใหม่ที่นี่

คอลเล็กชันรูปภาพที่มีขนาดคอลัมน์ต่างกัน และรูปภาพบางรูปครอบคลุมหลายคอลัมน์

ดูเดโมเกี่ยวกับธรรมชาติได้ที่นี่

วิธีแก้ปัญหาชั่วคราวและข้อจำกัด

การใช้รูปแบบการออกแบบนี้บนเว็บในปัจจุบันกำหนดให้คุณต้องใช้ไลบรารี JavaScript หรือวิธีแก้ปัญหาชั่วคราวที่ใช้ CSS Grid, Flexbox หรือหลายคอลัมน์ อย่างไรก็ตาม การดำเนินการนี้อาจมีข้อเสียดังต่อไปนี้

• ประสิทธิภาพต่ำลง: การใช้ไลบรารี JavaScript หรือโค้ดที่กำหนดเองเพื่อเลียนแบบเลย์เอาต์แบบ Masonry ของ CSS มีข้อเสียด้านประสิทธิภาพ ซึ่งอาจส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี
• โค้ดมีความซับซ้อนมากขึ้น:
  • การรับประกันตำแหน่งที่ถูกต้องของรายการและการกระจายพื้นที่ภายในตารางกริด CSS, Flexbox หรือหลายคอลัมน์เพื่อเลียนแบบเลย์เอาต์ CSS Masonry นั้นทำได้ยาก
  • การจัดการฟีเจอร์ที่เฉพาะเจาะจง เช่น รายการที่ครอบคลุมมากกว่า 1 คอลัมน์หรือแถว การจัดเรียงรายการที่กำหนดเอง หรือการปรับให้เข้ากับวิวพอร์ตอาจทำให้เกิดความซับซ้อนและข้อจำกัดได้เช่นกัน
• ภาระในการบำรุงรักษาที่มากขึ้น: โค้ด CSS หรือ JavaScript ที่กำหนดเองซึ่งมีความซับซ้อนจะบำรุงรักษาได้ยากกว่า

CSS Grid เป็นโหมดเลย์เอาต์ที่ยอดเยี่ยมซึ่งมีความยืดหยุ่นสูงและช่วยให้คุณสร้างเลย์เอาต์ได้หลากหลายสไตล์ ไม่ว่าจะเป็นทั้งหน้าเว็บ คอมโพเนนต์ หรือเพียงเพื่อจัดแนวแต่ละรายการ อย่างไรก็ตาม การจัดวางแบบนี้ไม่มีลักษณะเหมือนกับการจัดวางแบบก่ออิฐ

ในตารางกริด CSS แถวและคอลัมน์จะได้รับการกำหนดไว้อย่างเข้มงวด และรายการต่างๆ จะอยู่ได้เฉพาะภายในเซลล์ตารางกริดเท่านั้น หากคุณพยายามจัดเรียงรายการตามแกนใดแกนหนึ่ง แต่รายการมีขนาดไม่พอดีกับเซลล์ที่เกี่ยวข้อง คุณจะต้องเลือกระหว่างการเว้นช่องว่างระหว่างรายการหรือยืดรายการให้เต็มพื้นที่ว่าง

Flexbox จะสนใจเพียงทิศทางเดียวเช่นเดียวกับ Masonry และให้รายการต่างๆ ตัดสินใจเลือกพื้นที่ที่ต้องการใช้ตามทิศทางอื่นๆ ซึ่งหมายความว่าคุณสามารถใช้เลย์เอาต์ที่ดูเหมือนเลย์เอาต์แบบก่ออิฐโดยใช้ Flexbox ได้ ตราบใดที่คุณพอใจที่รายการจะจัดวางในทิศทางบล็อกทีละคอลัมน์ คอนเทนเนอร์ Flex จะต้องมีขนาดบล็อกหรือความสูงที่กำหนดไว้ด้วย เพื่อให้รายการรวมกันเป็นบรรทัด Flex ใหม่ ซึ่งจะสร้างคอลัมน์ใหม่

นอกจากนี้ หลายคอลัมน์ยังสร้างเลย์เอาต์ที่ดูเหมือนการก่ออิฐได้ด้วย โดยจัดเรียงรายการในคอลัมน์อีกครั้ง นอกจากนี้ หลายคอลัมน์ยังไม่อนุญาตให้คุณกำหนดขนาดแต่ละคอลัมน์ให้แตกต่างกัน โดยทั้งหมดจะมีขนาดเท่ากัน ในขณะที่การจัดวางแบบก่ออิฐจะให้ความยืดหยุ่นอย่างมากในการกำหนดแทร็กที่ใช้จัดวางรายการต่างๆ

ประเด็นที่ควรทราบในที่นี้ไม่ใช่ว่า Grid, Flexbox หรือหลายคอลัมน์เป็นเลย์เอาต์ที่แย่กว่า Masonry เลย์เอาต์เหล่านี้เป็นเลย์เอาต์ที่ยอดเยี่ยมซึ่งมี Use Case มากมาย ประเด็นคือ หากคุณต้องการเลย์เอาต์แบบก่ออิฐ เลย์เอาต์แบบก่ออิฐของ CSS คือสิ่งที่จะช่วยคุณได้

สถานะของ CSS Masonry

CSS Working Group กำลังร่างเลย์เอาต์แบบก่ออิฐในข้อกำหนด CSS Grid ระดับ 3 ข้อกำหนดนี้ยังอยู่ระหว่างการพัฒนาและมีไวยากรณ์ที่เสนอ 2 แบบที่แตกต่างกันชั่วคราว วิธีแรกใช้คีย์เวิร์ดใหม่สำหรับพร็อพเพอร์ตี้ display ส่วนวิธีที่ 2 จะผสานรวมการจัดวางแบบก่ออิฐเข้ากับเลย์เอาต์ตารางกริด CSS โดยตรง

ใช้ display: masonry

ไวยากรณ์นี้จะแนะนำ CSS Masonry เป็นประเภท display ของตัวเอง ดูรายละเอียดเพิ่มเติมเกี่ยวกับแนวทางและแรงจูงใจได้ในบล็อกโพสต์ต้องการความคิดเห็น: เราควรนิยาม CSS Masonry อย่างไรจากทีม Google Chrome รวมถึงในส่วนที่เหลือของโพสต์นี้ ต้นแบบปัจจุบันใน Chromium อิงตามข้อเสนอนี้

display: grid; grid-template-*: masonry;

ในไวยากรณ์นี้ การจัดเลย์เอาต์แบบ Masonry ของ CSS จะผสานรวมเข้ากับ CSS Grid โดยตรง โหมด Masonry จะทริกเกอร์โดยใช้คีย์เวิร์ด masonry กับคำจำกัดความ grid-template-columns ในกรณีของเลย์เอาต์ Masonry แบบแถว หรือใช้กับคำจำกัดความ grid-template-rows ในกรณีของเลย์เอาต์ Masonry แบบคอลัมน์

ดูรายละเอียดเพิ่มเติมเกี่ยวกับข้อเสนอนี้และแรงจูงใจได้ในโพสต์ WebKit ช่วยเราเลือกไวยากรณ์สุดท้ายสำหรับ Masonry ใน CSS

โปรดทราบว่าทางเลือกอื่นนอกเหนือจากข้อเสนอนี้คือพร็อพเพอร์ตี้ item-pack และคีย์เวิร์ด collapse ซึ่งจะทริกเกอร์ CSS Masonry แทนการใช้พร็อพเพอร์ตี้เทมเพลตกริดอย่างใดอย่างหนึ่งจาก 2 รายการ

นับตั้งแต่การเผยแพร่โพสต์โดยทีม Chrome และ WebKit ทาง CSSWG ได้พูดคุยกันอย่างต่อเนื่องเกี่ยวกับไวยากรณ์โดยรวมที่จะใช้ต่อไป ความคิดเห็นของคุณจะช่วยให้เราทราบถึงการพัฒนาเพิ่มเติมภายในฟอรัมเหล่านี้

ดูรายละเอียดเพิ่มเติมเกี่ยวกับสถานะปัจจุบันของการพูดคุยได้ที่ปัญหา 11593 ซึ่งสรุปหัวข้อการพูดคุยเกี่ยวกับไวยากรณ์การก่ออิฐในปัจจุบัน และปัญหา 11243 สำหรับสรุปการถกเถียงเกี่ยวกับไวยากรณ์จนถึงปัจจุบัน

สร้างเลย์เอาต์ CSS Masonry ของคุณเอง

มาสนุกกับการสร้างเลย์เอาต์แบบก่ออิฐด้วย CSS กัน

แม้ว่าไวยากรณ์สำหรับ CSS Masonry จะยังอยู่ระหว่างการหารือ แต่คุณสามารถทดสอบการใช้งานฟีเจอร์นี้ใน Chromium ได้แล้ววันนี้โดยเปิดใช้แฟล็กเลย์เอาต์ CSS Masonry ตามที่อธิบายไว้ในทดสอบ CSS Masonry วันนี้ ตัวอย่างต่อไปนี้แสดงให้เห็นว่ามีอะไรบ้างที่พร้อมให้ใช้งานในเวอร์ชันทดลองใช้สำหรับนักพัฒนาซอฟต์แวร์

สร้างคอนเทนเนอร์แบบ Masonry

หากต้องการสร้างคอนเทนเนอร์แบบก่ออิฐตามคอลัมน์รายการแรก ให้ใช้ display:masonry และกำหนดขนาดคอลัมน์โดยใช้ grid-template-columns เนื่องจาก masonry-direction มีค่าเริ่มต้นเป็น column การตั้งค่าพร็อพเพอร์ตี้นี้จึงเป็นตัวเลือกที่ไม่บังคับ

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

ดูเดโมคอลัมน์ขนาดเท่ากันที่นี่

สำหรับคอนเทนเนอร์แบบ Masonry ที่อิงตามแถว ให้ใช้ display:masonry แทน โดยกำหนดขนาดแถวโดยใช้ grid-template-rows แล้วตั้งค่า masonry-direction:row

.masonry {
 display: masonry;
 masonry-direction: row;
 grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
}

ดูเดโมแถวที่มีขนาดเท่ากันที่นี่

คุณอาจสังเกตเห็นว่าไวยากรณ์นี้แตกต่างจากข้อเสนอเดิมจาก Google เล็กน้อย ไม่ว่าจะใช้ทริกเกอร์ใดสำหรับ CSS Masonry กลุ่มทำงาน CSS ได้ตัดสินใจที่จะใช้พร็อพเพอร์ตี้การกำหนดขนาดและการวางตำแหน่งเทมเพลตกริดซ้ำภายในเลย์เอาต์ CSS Masonry

แม้ว่าวิธีนี้จะช่วยให้ใช้พร็อพเพอร์ตี้ซ้ำระหว่างประเภทเลย์เอาต์ได้มากขึ้น แต่คุณอาจสับสน และเรายินดีรับฟังความคิดเห็นจากคุณเกี่ยวกับเรื่องนี้ เราอาจพิจารณาสร้างชื่อแทนทั่วไปเพิ่มเติมสำหรับพร็อพเพอร์ตี้อย่าง grid-template-columns และ grid-template-rows เช่น template-columns หรือ template-rows ซึ่งใช้ได้กับทั้งตารางกริดและเลย์เอาต์แบบก่ออิฐ

ใช้ขนาดแทร็กเริ่มต้น

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

ในตารางกริด grid-template-columns และ grid-template-rows จะมีค่าเริ่มต้นเป็น none ซึ่งตามที่กำหนดไว้ในปัจจุบันมักจะส่งผลให้มีคอลัมน์หรือแถวเดียว สำหรับเลย์เอาต์แบบก่ออิฐ ค่าเริ่มต้นนี้มักจะส่งผลให้เกิดเลย์เอาต์ที่ไม่พึงประสงค์

การติดตั้งใช้งานใน Chromium จะเพิ่มคำจำกัดความที่เสนอใหม่สำหรับ none ซึ่งจะแทนที่ขนาดแทร็กเริ่มต้นใน CSS Masonry ขนาดแทร็กเริ่มต้นใหม่นี้คือค่า repeat(auto-fill, auto) ค่านี้จะสร้างเลย์เอาต์แบบก่ออิฐที่สวยงามโดยไม่ต้องกำหนดขนาดแทร็กเลย

.masonry {
  display: masonry;
  gap: 10px;
}

ดูการสาธิตขนาดแทร็กเริ่มต้นที่นี่

ดังที่แสดงในรูปภาพ คอนเทนเนอร์แบบก่ออิฐจะสร้างคอลัมน์ที่มีขนาดอัตโนมัติจำนวนมากเท่าที่จะพอดีกับพื้นที่ว่างที่มีอยู่

เมื่อใช้ CSS Grid ระบบจะวางรายการทั้งหมดก่อนที่จะปรับขนาดแทร็ก ซึ่งหมายความว่าคำจำกัดความการปรับขนาดอัตโนมัติของแทร็กนี้เป็นไปไม่ได้ อย่างไรก็ตาม ด้วย CSS Masonry ข้อจำกัดนี้จะไม่มีผลอีกต่อไป เนื่องจากการจัดวางและการปรับขนาดจะเชื่อมโยงกันและเรียบง่ายขึ้น เมื่อยกเลิกข้อจำกัดนี้ เราจะสามารถระบุขนาดเริ่มต้นของแทร็กที่มีประโยชน์มากขึ้นสำหรับเลย์เอาต์แบบก่ออิฐ

ลองใช้พร็อพเพอร์ตี้ชวเลข masonry

ตามที่กล่าวไปก่อนหน้านี้ การติดตั้งใช้งานในปัจจุบันใน Chromium อาศัยพร็อพเพอร์ตี้ grid-template-* เพื่อกำหนดแทร็ก Masonry ในเลย์เอาต์ อย่างไรก็ตาม เนื่องจาก Masonry มีมิติข้อมูลเดียว เราจึงได้ใช้พร็อพเพอร์ตี้ชวเลข masonry ซึ่งคุณสามารถใช้เพื่อกำหนดทั้งทิศทาง Masonry และคำจำกัดความของแทร็กได้ในครั้งเดียว โดยไม่ต้องใช้พร็อพเพอร์ตี้ที่มีคำนำหน้า grid- ที่สร้างความสับสน

ตัวอย่างเช่น ข้อมูลโค้ด 2 รายการต่อไปนี้จะสร้างคอนเทนเนอร์ CSS Masonry ที่เทียบเท่ากัน

.masonry {
 display: masonry;
 masonry: "a a b" 50px 100px 200px row;
}

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: 50px 100px 200px;
  grid-template-areas: "a" "a" "b"
}

ดูเดโมชวเลขของ Masonry ที่นี่

ชวเลข masonry ยังอยู่ระหว่างการพิจารณาโดยกลุ่มการทำงาน CSS ลองใช้เลยวันนี้ แล้วบอกเราว่าคุณคิดอย่างไร

ใช้ขนาดแทร็กที่กำหนดเอง

เมื่อพูดถึงการกำหนดขนาดแทร็ก Masonry มีความยืดหยุ่นพอๆ กับ Grid ในการให้คุณปรับแต่งจำนวนและขนาดของแทร็กเลย์เอาต์ แทร็ก Masonry ไม่จำเป็นต้องมีขนาดเท่ากันทั้งหมด เช่น

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

ดูเดโมขนาดแทร็กที่กำหนดเองที่นี่

ในตัวอย่างนี้ เราจะกำหนดแทร็ก 3rem 2 แทร็กแรก ตามด้วยแทร็ก 5rem จำนวนต่างๆ ตามด้วยแทร็ก 12rem แทร็กเดียว

ครอบคลุมหลายแทร็ก

ในเลย์เอาต์แบบก่ออิฐ รายการไม่จำเป็นต้องถูกจำกัดให้อยู่ในแทร็กที่วางไว้ เนื่องจากสามารถขยายได้หลายแทร็กหากจำเป็น ซึ่งจะมีประโยชน์มากเมื่อบางรายการมีความสำคัญมากกว่ารายการอื่นๆ และต้องการพื้นที่มากกว่า

เช่น

.masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.important-item {
  grid-column: span 2;
}

ดูเดโมการขยายหลายแทร็กที่นี่

นอกจากนี้ คุณยังใช้ความสามารถนี้เพื่อขยายหลายแทร็กเพื่อทำให้บางรายการมีความยาวเท่ากับคอนเทนเนอร์ทั้งหมดได้ด้วย

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

ซึ่งเป็นสิ่งที่เดโมเว็บไซต์ข่าวใช้เพื่อแสดงโฆษณาการสมัครใช้บริการภายในบทความ

การปรับแต่งตำแหน่งรายการแบบเรียงต่อกัน

ใน CSS Masonry ระบบจะวางรายการในคอลัมน์หรือแถวที่มีตำแหน่งการทำงานสั้นที่สุด

ลองนึกภาพคอนเทนเนอร์แบบก่ออิฐ 2 คอลัมน์ หากคอนเทนเนอร์มีรายการสูง 110 พิกเซลในคอลัมน์แรกและรายการสูง 100 พิกเซลในคอลัมน์ที่ 2 ระบบจะวางรายการที่ 3 ไว้ในคอลัมน์ที่ 2 ซึ่งจะอยู่ใกล้กับจุดเริ่มต้นของทิศทาง Masonry มากขึ้น 10 พิกเซล

หากคุณพิจารณาว่าความแตกต่าง 10px ในตำแหน่งการแสดงผลนั้นน้อยพอสำหรับกรณีของคุณ และต้องการให้วางรายการที่ 3 ในคอลัมน์แรกแทน เพื่อให้ตรงกับลำดับแหล่งที่มามากขึ้น ให้ใช้พร็อพเพอร์ตี้ item-tolerance

พร็อพเพอร์ตี้ item-tolerance ใหม่จะควบคุมความไวในการวางรายการ

ในตัวอย่างก่อนหน้านี้ คุณสามารถใช้ item-tolerance: 10px; กับคอนเทนเนอร์เพื่อปรับแต่งความแปรปรวนในการวางรายการได้ ดังนี้

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

ดูเดโมเกี่ยวกับความคลาดเคลื่อนของสินค้าที่นี่

โปรดทราบว่าข้อกำหนดฉบับร่างเรียกพร็อพเพอร์ตี้นี้ว่า item-slack เมื่อเร็วๆ นี้ CSS Working Group ได้ตัดสินใจใช้ชื่อ item-tolerance แทน และจะอัปเดตข้อกำหนดเฉพาะในเร็วๆ นี้

พร็อพเพอร์ตี้อื่นๆ ที่ใช้ได้

คุณสามารถใช้พร็อพเพอร์ตี้การกำหนดขนาดและการวางเทมเพลตเดียวกันเพื่อกำหนดขนาดและวางรายการในแกนตารางกริดของคอนเทนเนอร์ Masonry ได้เช่นเดียวกับที่ทำได้ด้วย CSS Grid เช่น grid-row, grid-column, grid-area, grid-template-areas หรือ order สัมผัสประสิทธิภาพเต็มรูปแบบของ CSS Grid เมื่อสร้างเลย์เอาต์แบบก่ออิฐ

ขอความคิดเห็น

เราหวังว่าคุณจะลองสำรวจ CSS Masonry, ใช้ความคิดสร้างสรรค์ และค้นพบความสามารถใหม่ๆ ที่จะช่วยคุณปลดล็อกได้ วิธีเริ่มต้นที่ดีคือดูเดโมและซอร์สโค้ด แล้วเริ่มสร้างตัวอย่างของคุณเองใน Chromium (อย่าลืมเปิดใช้แฟล็กก่อน)

ความคิดเห็นของคุณมีความสำคัญในการช่วยเรากำหนดรูปแบบ API และตรวจสอบว่า API ได้รับการออกแบบมาเพื่อตอบสนองความต้องการของคุณบนเว็บ ลองใช้เลย์เอาต์แบบก่ออิฐแล้วบอกเราว่าคุณคิดอย่างไร

หากคุณมีความคิดเห็นหรือข้อเสนอแนะเกี่ยวกับรูปแบบของ API โปรดแจ้งให้เราทราบโดยแสดงความคิดเห็นในปัญหา 11243 หรือหากต้องการเขียนโพสต์ในบล็อกของคุณเองหรือในโซเชียลมีเดีย โปรดแจ้งให้เราทราบใน X หรือ LinkedIn

CSS Masonry ยังอยู่ระหว่างการนำไปใช้ใน Chromium หากคุณทดสอบ โปรดทราบว่าเรายังคงดำเนินการอย่างต่อเนื่อง และคุณอาจพบกรณีที่ฟีเจอร์นี้ไม่ทำงานตามที่คาดไว้ ข้อจำกัดบางอย่างในปัจจุบัน ได้แก่ การแพ็กแบบหนาแน่น การวางแบบย้อนกลับ การรองรับ Subgrid การรองรับ Out-of-Flow การรองรับ Baseline การรองรับเครื่องมือสำหรับนักพัฒนาเว็บ การรองรับการกระจาย Fragment การรองรับการตกแต่งช่องว่าง และอื่นๆ

หากพบข้อบกพร่องขณะทดสอบฟีเจอร์ โปรดแชร์ความคิดเห็นโดยเปิดข้อบกพร่องใหม่ของ Chromium