ต้องการความคิดเห็น: เราควรกำหนด CSS Masonry อย่างไร

Rachel Andrew
Ian Kilpatrick
Ian Kilpatrick
GitHub
Tab Atkins-Bittner
Tab Atkins-Bittner

เผยแพร่: 19 กันยายน 2024, อัปเดตล่าสุด: 13 กุมภาพันธ์ 2026

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

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

โพสต์นี้ไม่ได้ครอบคลุมกรณีการใช้งานที่เป็นไปได้ทั้งหมด แต่เห็นได้ชัดว่า การแยกเลย์เอาต์แบบอิฐออกจากเลย์เอาต์แบบตารางจะไม่ส่งผลให้ฟีเจอร์ขาด ฟังก์ชันการทำงาน ในความเป็นจริงแล้วอาจเป็นไปในทางตรงกันข้าม ดังที่คุณจะเห็นในโพสต์นี้ เวอร์ชัน display: masonry สร้างโอกาสใหม่ๆ และไวยากรณ์ที่เรียบง่ายขึ้น นอกจากนี้ นักพัฒนาแอปจำนวนมากยังแสดงความกังวลเกี่ยวกับความเป็นไปได้ในการ จัดเรียงรายการใหม่ด้วยเลย์เอาต์แบบก้อนอิฐซึ่งอาจทำให้เกิดปัญหาด้านการช่วยเหลือพิเศษ เรายังได้แก้ไขปัญหานี้สำหรับทั้ง 2 เวอร์ชันของไวยากรณ์ผ่านพร็อพเพอร์ตี้ reading-flow ที่เสนอ

เลย์เอาต์อิฐก่อพื้นฐาน

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

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

ด้วย display: masonry

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

หากต้องการกำหนดแทร็ก ให้ใช้ masonry-template-tracks โดยมีค่ารายการแทร็กตามที่ใช้ ในเลย์เอาต์ตารางกริด CSS

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(3, 1fr);
  gap: 10px;
}

ด้วย display: grid

หากต้องการสร้างเลย์เอาต์แบบเมสันรี ให้สร้างเลย์เอาต์ตารางกริดก่อนโดยใช้ค่า grid สำหรับพร็อพเพอร์ตี้ display กำหนดคอลัมน์ด้วยพร็อพเพอร์ตี้ grid-template-columns จากนั้นกำหนดค่า grid-template-rows เป็น masonry

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

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 10px;
}

สิ่งที่ควรพิจารณาระหว่างตัวเลือกทั้ง 2

ความแตกต่างที่สำคัญระหว่าง 2 วิธีนี้คือเมื่อใช้display: masonry เวอร์ชัน คุณจะได้รับเลย์เอาต์แบบเมสันรีแม้ว่าจะไม่ได้ระบุแทร็กใดๆ ด้วย masonry-template-tracksก็ตาม ดังนั้น display: masonry อาจเป็นสิ่งเดียวที่คุณต้องการ เนื่องจากค่าเริ่มต้นของ masonry-template-tracks คือ repeat(auto-areas, auto) เลย์เอาต์จะสร้างแทร็กที่มีขนาดอัตโนมัติให้มากที่สุดเท่าที่จะ พอดีกับคอนเทนเนอร์

การไหลเวียนแบบย้อนกลับด้วยอิฐก่อ

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

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

ด้วย display: masonry

สร้างเลย์เอาต์แบบเมสันรีด้วย display: masonry จากนั้นใช้ masonry-direction โดยมีค่าเป็น column-reverse

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(3, 1fr);
  masonry-direction: column-reverse;
}

ด้วย display: grid

สร้างเลย์เอาต์แบบเมสันรีด้วย display: grid และ grid-template-rows: masonry จากนั้นใช้พร็อพเพอร์ตี้ grid-auto-flow ที่มีค่าใหม่เป็น row-reverse เพื่อ ทำให้รายการจัดวางจากจุดสิ้นสุดของบล็อกของคอนเทนเนอร์กริด

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  grid-auto-flow: row-reverse;
}

สิ่งที่ควรพิจารณาระหว่างตัวเลือกทั้ง 2

display: masonry เวอร์ชันนี้ให้ความรู้สึกคล้ายกับวิธีที่ Flexbox ทำงาน เปลี่ยน ทิศทางที่คอลัมน์ไหลโดยใช้พร็อพเพอร์ตี้ masonry-direction ที่มีค่าเป็น column-reverse

เวอร์ชันตารางกริด CSS ใช้ grid-auto-flow ตามที่กำหนดไว้ในปัจจุบัน grid-auto-flow: row-reverse และ grid-auto-flow: column-reverse จะให้ ผลลัพธ์เดียวกัน ซึ่งอาจทำให้เกิดความสับสนได้เนื่องจากคุณอาจคาดหวังให้ปุ่มเหล่านี้ทำสิ่งอื่น

การจัดวางสำหรับแถว

นอกจากนี้ คุณยังเปลี่ยนทิศทางเพื่อกำหนดแถวได้ด้วย

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

ด้วย display: masonry

สร้างเลย์เอาต์แบบก้อนอิฐด้วย display: masonry จากนั้นตั้งค่าของ masonry-direction เป็น row หากไม่ต้องการให้แถวมีขนาดบล็อกที่เฉพาะเจาะจง คุณไม่จำเป็นต้องระบุการกำหนดขนาดแทร็กใดๆ เนื่องจากค่าเริ่มต้นคือ auto ดังนั้นแทร็กจะมีขนาดตามเนื้อหาที่อยู่ในแทร็ก

.masonry {
  display: masonry;
  masonry-direction: row;
}

ด้วย display: grid

.masonry {
  display: grid;
  grid-template-columns: masonry;
  grid-template-rows: repeat(3, 1fr);
}

สิ่งที่ควรพิจารณาระหว่างตัวเลือกทั้ง 2

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

จากตัวอย่างการเปลี่ยนโฟลว์ทั้ง 2 แบบนี้ display: masonryเวอร์ชัน จะใช้งานง่ายกว่า มีพร็อพเพอร์ตี้เดียวที่ควบคุมโฟลว์ masonry-direction ซึ่งมีค่าใดค่าหนึ่งต่อไปนี้

  • row
  • column
  • row-reverse
  • column-reverse

จากนั้นให้เพิ่มข้อมูลการปรับขนาดที่จำเป็นลงใน masonry-template-tracks ในกรณีที่ค่าเริ่มต้นของ "อัตโนมัติ" ไม่ใช่สิ่งที่คุณต้องการ

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

วางตำแหน่งรายการ

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

ด้วย display: masonry

CSS ต่อไปนี้กำหนดเลย์เอาต์แบบเมสันรีที่มี 4 คอลัมน์ ดังนั้นแกนตารางกริดจึงเป็นคอลัมน์ รายการที่มีคลาส a จะวางจากบรรทัดคอลัมน์แรก ไปยังบรรทัดคอลัมน์ที่สาม โดยครอบคลุม 2 แทร็กที่มีพร็อพเพอร์ตี้ใหม่ masonry-track-* นอกจากนี้ยังกำหนดเป็นรูปแบบย่อของ masonry-track: 1 / 3; ได้ด้วย

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(4, 1fr);
}

.a {
  masonry-track-start: 1;
  masonry-track-end: 3;
}

ด้วย display: grid

CSS ต่อไปนี้กำหนดเลย์เอาต์แบบเมสันรีที่มี 4 คอลัมน์ ดังนั้นแกนตารางกริดจึงเป็นคอลัมน์ รายการที่มีคลาส a จะวางจากบรรทัดคอลัมน์แรกไปยังบรรทัดคอลัมน์ที่สาม โดยครอบคลุม 2 แทร็กที่มีพร็อพเพอร์ตี้ grid-column-* ซึ่งยังกำหนดเป็นรูปแบบย่อของ grid-column: 1 / 3; ได้ด้วย

หากแกนตารางกริดเป็นคอลัมน์ ระบบจะไม่สนใจพร็อพเพอร์ตี้ grid-row-* และหากแกนตารางกริดเป็นแถว ระบบจะไม่สนใจพร็อพเพอร์ตี้ grid-columns-*

.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
}

.a {
  grid-column-start: 1;
  grid-column-end: 3;
}

คุณใช้บรรทัดที่มีชื่อกับทั้ง 2 รูปแบบไวยากรณ์ได้ ตัวอย่างต่อไปนี้แสดงกริด ที่มีเส้นคอลัมน์ 2 เส้นชื่อ a

ด้วย display: masonry

โดยบรรทัดที่มีชื่อจะกำหนดไว้ในค่ารายการแทร็กของ masonry-template-tracks โดยวางไว้หลังบรรทัดใดก็ได้ที่ชื่อ a

.masonry {
  display: masonry;
  masonry-template-tracks: 100px [a] auto [a] auto 100px;
}

.item {
  masonry-track: a;
}

ด้วย display: grid

โดยบรรทัดที่มีชื่อจะกำหนดไว้ในค่ารายการแทร็กของ grid-template-columns โดยจะวางรายการไว้หลังบรรทัดแรกที่ชื่อ a หากกำหนดพร็อพเพอร์ตี้ grid-row ระบบจะไม่สนใจพร็อพเพอร์ตี้นี้

.masonry {
  display: grid;
  grid-template-columns: 100px [a] auto [a] auto 100px;
  grid-template-rows: masonry;
}

.item {
  grid-column: a;
  grid-row: a; /* ignored */
}

นอกจากนี้ คุณยังใช้พื้นที่ที่ตั้งชื่อแล้วในทั้ง 2 รูปแบบไวยากรณ์ได้ด้วย ตัวอย่างต่อไปนี้แสดงตารางที่มี 3 แทร็กชื่อ "a", "b" และ "c"

ด้วย display: masonry

โดยระบบจะตั้งชื่อแทร็กเป็นค่าของ masonry-template-areas เนื่องจากไม่ได้กำหนดขนาดแทร็กไว้ ทั้ง 3 แทร็กจึงมีขนาดเป็น auto โดยค่าเริ่มต้น รายการจะอยู่ในแทร็ก "a"

.masonry {
  display: masonry;
  masonry-template-areas: "a b c";
}

.item {
  masonry-track: a;
}

ซึ่งจะทำงานเหมือนกันไม่ว่าคุณจะกําหนดแถวหรือคอลัมน์ ความแตกต่างเพียงอย่างเดียวคือพร็อพเพอร์ตี้ masonry-direction

ด้วย display: grid

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

.masonry {
  display: grid;
  grid-template-areas: "a b c";
  grid-template-rows: masonry;
}

.item {
  grid-column: a;
}

แต่สำหรับแถว คุณต้องเขียนค่าแตกต่างออกไป เนื่องจาก grid-template-areas กำหนดพื้นที่ 2 มิติ และแต่ละแถว จะเขียนเป็นสตริงแยกกัน

.masonry {
  display: grid;
  grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
  grid-template-columns: masonry;
}

.item {
  grid-row: a;
}

สิ่งที่ควรพิจารณาระหว่างตัวเลือกทั้ง 2

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

คำย่อ

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

ด้วย display: masonry

display: masonryรูปแบบย่อใช้คีย์เวิร์ด masonry หากต้องการสร้างเลย์เอาต์ เมสันรีพื้นฐาน ให้ใช้ CSS ต่อไปนี้

.masonry {
  display: masonry;
  masonry: repeat(3, 1fr);
}

วิธีสร้างเลย์เอาต์แบบเมสันรีที่เรียบง่ายตามแถว

.masonry {
  display: masonry;
  masonry: row;
}

วิธีกำหนดแทร็กและเลย์เอาต์แบบแถวด้วยรูปแบบย่อ

.masonry {
  display: masonry;
  masonry: repeat(3, 1fr) row;
}

ด้วย display: grid

หากต้องการสร้างเลย์เอาต์แบบเมสันรีพื้นฐานโดยใช้ชวเลข grid

.masonry {
  display: grid;
  grid: masonry / repeat(3, 1fr);
}

วิธีสร้างเลย์เอาต์แบบเมสันรีที่เรียบง่ายตามแถว

.masonry {
  display: grid;
  grid: repeat(3, auto) / masonry;
}

ในตัวอย่างที่ซับซ้อนมากขึ้น เนื่องจากไวยากรณ์ display:masonry โดยรวมมีความ เรียบง่าย จึงสามารถรวมพร็อพเพอร์ตี้หลายรายการไว้ในรูปแบบย่อได้โดยไม่ ซับซ้อนจนเกินไป

เช่น สมมติว่าคุณสร้าง 3 คอลัมน์ชื่อ "a", "b" และ "c" โดยเติมข้อมูล จากล่างขึ้นบน

ด้วย display:masonry

ใน display: masonry คุณตั้งค่าทั้ง 3 อย่างนี้พร้อมกันได้โดยใช้รูปแบบย่อดังนี้

.masonry {
  display: masonry;
  masonry: column-reverse "a b c";
}

เนื่องจากระบบปรับขนาดโดยอัตโนมัติ คุณจึงไม่จำเป็นต้องระบุขนาด แต่หากต้องการใช้ขนาดที่เฉพาะเจาะจงแทน ก็สามารถเพิ่มได้ ตัวอย่างเช่น masonry: column-reverse 50px 100px 200px "a b c";

นอกจากนี้ คุณยังจัดเรียงคอมโพเนนต์แต่ละรายการใหม่ได้อย่างอิสระโดยไม่ต้องจดจำลำดับที่เฉพาะเจาะจง และหากต้องการใช้แถวแทน คุณเพียงแค่ สลับ column-reverse กับ row หรือ row-reverse ส่วนไวยากรณ์อื่นๆ จะยังคง เหมือนเดิม

ด้วย display: grid

ใน display: grid คุณต้องตั้งค่าทั้ง 3 ด้านนี้แยกกัน

.masonry {
  display: grid;
  grid-template-rows: masonry;
  grid-template-areas: "a b c";
  grid-auto-flow: wrap-reverse;
}

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

.masonry {
  display: grid;
  grid: masonry / 50px 100px 200px;
  grid-template-areas: "a b c";
  grid-auto-flow: wrap-reverse;
}

หรือหากต้องการใช้ "grid" เพื่อตั้งค่าขนาดและชื่อพื้นที่ทั้งหมดพร้อมกัน ให้ทำดังนี้

.masonry {
  display: grid;
  grid: "a b c" masonry / 50px 100px 200px;
  grid-auto-flow: wrap-reverse;
}

ในตัวอย่างทั้ง 2 นี้ คุณต้องเรียงลำดับอย่างเคร่งครัด และจะแตกต่างกันหากต้องการแถวแทน ตัวอย่างเช่น การเปลี่ยนเป็นแถวจะมีลักษณะดังนี้

.masonry {
  display: grid;
  grid: 50px 100px 200px / masonry;
  grid-template-areas: "a" "b" "c";
}

หรือจะเขียนย่อๆ ให้เข้าใจง่ายก็ได้ดังนี้

.masonry {
  display: grid;
  grid: "a" 50px "b" 100px "c"  200px / masonry;
}

สิ่งที่ควรพิจารณาระหว่างตัวเลือกทั้ง 2

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

display: grid เวอร์ชันนี้ใช้ตัวย่อ grid ที่มีอยู่ ซึ่งเป็นตัวย่อที่ค่อนข้างซับซ้อน และจากประสบการณ์ของเรา นักพัฒนาซอฟต์แวร์ไม่ค่อยได้ใช้ตัวย่อนี้ ดังที่แสดงในตัวอย่างก่อนหน้า แม้จะใช้กับเลย์เอาต์แบบเมสันรีอย่างง่าย ก็ต้องระมัดระวังเมื่อตั้งค่าลำดับของค่า

ข้อควรพิจารณาอื่นๆ

โพสต์นี้จะดู Use Case ที่พบบ่อยในปัจจุบัน แต่เราไม่ทราบว่าในอนาคต Grid หรือ Masonry จะเป็นอย่างไร เหตุผลสำคัญในการใช้ไวยากรณ์ display: masonry แยกกันคือการอนุญาตให้ทั้ง 2 อย่างแตกต่างกันในอนาคต โดยเฉพาะค่าเริ่มต้น เช่น ค่าสำหรับ masonry-template-tracks การทำสิ่งต่างๆ ในเลย์เอาต์แบบก้อนอิฐอาจมีประโยชน์มากกว่าในเลย์เอาต์แบบตารางกริด เราไม่สามารถ เปลี่ยนค่าเริ่มต้นของตารางกริดได้หากใช้เวอร์ชัน display: grid ซึ่งอาจ จำกัดสิ่งที่เราอาจต้องการทำในอนาคต

ในตัวอย่างเหล่านี้ คุณจะเห็นตำแหน่งที่เบราว์เซอร์ต้องละเว้นพร็อพเพอร์ตี้ที่ใช้ได้ในกริดหากใช้เลย์เอาต์แบบอิฐ เช่น grid-template-areas ซึ่งค่าส่วนใหญ่จะผ่านไปเนื่องจากกำหนดเลย์เอาต์ตารางกริด 2 มิติ แต่ในเลย์เอาต์แบบเมสันรี เราจะกำหนดทิศทางเดียวอย่างสมบูรณ์เท่านั้น

แสดงความคิดเห็น

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