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

Rachel Andrew

Ian Kilpatrick

Tab Atkins-Bittner

เผยแพร่เมื่อวันที่ 19 กันยายน 2024

กลุ่มทํางาน CSS ได้รวมข้อเสนอการจัดเรียงแบบ Masonry ของ 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 ตัวเลือก

ความแตกต่างที่เห็นได้ชัดระหว่างวิธีการเหล่านี้คือเมื่อใช้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 ต่อไปนี้กำหนดเลย์เอาต์แบบ Masonry ที่มี 4 คอลัมน์ แกนตารางกริดจึงเป็นคอลัมน์ รายการที่มีคลาส a จะวางจากบรรทัดคอลัมน์แรกไปจนถึงบรรทัดคอลัมน์ที่ 3 ซึ่งครอบคลุม 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 ต่อไปนี้กำหนดเลย์เอาต์แบบ Masonry ที่มี 4 คอลัมน์ แกนตารางกริดจึงเป็นคอลัมน์ รายการที่มีคลาส a จะวางจากบรรทัดคอลัมน์แรกไปจนถึงบรรทัดคอลัมน์ที่ 3 ซึ่งครอบคลุม 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;
}

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

ชวเลข

ในโพสต์นี้ เราใช้รูปแบบแบบยาวเพื่อให้เห็นได้ชัดเจนขึ้นว่าพร็อพเพอร์ตี้ใดที่ใช้อยู่ แต่คุณกำหนดทั้งเวอร์ชัน 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;
}

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

.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 ที่มีอยู่ ซึ่งเป็นตัวย่อที่ซับซ้อนพอสมควร และจากประสบการณ์ของเรา นักพัฒนาแอปใช้ตัวย่อนี้น้อยลง ดังที่แสดงในตัวอย่างก่อนหน้านี้ แม้จะใช้กับเลย์เอาต์แบบเรียงต่อกันแบบง่าย ก็ต้องใช้ความระมัดระวังในการตั้งค่าลําดับของค่า

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

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

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

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

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