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

Patrick Brosset

Alison Maher

เผยแพร่: 23 กรกฎาคม 2025

ทีม 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 เพื่อจัดเรียงรายการในรูปแบบคอลัมน์หรือแถวได้ โดยวางรายการไว้ในคอลัมน์หรือแถวเหล่านั้นในลักษณะที่ยุบ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ใช้ display: masonry

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

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

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

.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 Masonry สร้างสรรค์ผลงาน และค้นพบความสามารถใหม่ๆ ที่จะช่วยให้คุณปลดล็อกศักยภาพ วิธีเริ่มต้นที่ดีคือดูเดโมและซอร์สโค้ด แล้วเริ่มสร้างตัวอย่างของคุณเองใน Chromium (อย่าลืมเปิดใช้ Flag ก่อน)

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

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

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

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