ทีละขั้น: ช่วยเราสร้าง 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"
4. เปิดใช้ฟีเจอร์ทดลอง
5. รีสตาร์ทเบราว์เซอร์

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

เลย์เอาต์แบบเมสันคืออะไร

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

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

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

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

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

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

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

ตัวอย่างอื่นๆ ของการใช้เลย์เอาต์แบบอิฐมีดังนี้

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

ดูเดโมบล็อกที่นี่

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

ดูเดโมเว็บไซต์ข่าวที่นี่

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

ดูเดโมธรรมชาติที่นี่

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

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

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

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

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

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

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

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

สถานะของเลย์เอาต์แบบอิฐของ CSS

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

ใช้ display: masonry

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

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

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

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

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

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

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

สร้างเลย์เอาต์แบบก้อนอิฐ CSS ของคุณเอง

มาสนุกกับการสร้างเลย์เอาต์แบบเมสันรี CSS กัน

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

สร้างคอนเทนเนอร์แบบเมสันรี

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

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

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

หากต้องการใช้คอนเทนเนอร์เมสันรีแบบแถว ให้ใช้ 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 Working Group ได้ตัดสินใจที่จะนำคุณสมบัติการกำหนดขนาดและการจัดวางเทมเพลตกริดมาใช้ซ้ำ ภายในเลย์เอาต์ 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พร็อพเพอร์ตี้ย่อgrid- ซึ่งคุณสามารถใช้เพื่อกำหนดทั้งทิศทางของเลย์เอาต์แบบเมสันรีและคำจำกัดความของแทร็กได้ในครั้งเดียวโดยไม่ต้องใช้พร็อพเพอร์ตี้ที่มีคำนำหน้าซึ่งสร้างความสับสน

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

.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 มีความยืดหยุ่นเช่นเดียวกับกริดในการช่วยให้คุณปรับแต่งจำนวนและขนาดของแทร็กเลย์เอาต์ได้ แทร็กแบบเมสันรีไม่จำเป็นต้องมีขนาดเท่ากันเสมอไป เช่น

.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 พิกเซลในคอลัมน์ที่สอง ระบบจะวางรายการที่สาม ในคอลัมน์ที่สอง ซึ่งจะอยู่ใกล้จุดเริ่มต้นของทิศทางเมสันรีมากขึ้น 10 พิกเซล

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

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

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

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

ดูการสาธิตความคลาดเคลื่อนของสินค้าที่นี่

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

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

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

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

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

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

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

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

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