CSS Grid Level 3 หรือที่เรียกว่าเลย์เอาต์ "Masonry" ขอความคิดเห็นและความช่วยเหลือในการออกแบบ

 (webkit.org)
2 คะแนน โดย GN⁺ 2024-04-24 | 1 ความคิดเห็น | แชร์ทาง WhatsApp

  • มีข้อเสนอให้เพิ่มเลย์เอาต์แบบ Masonry ของ CSS Grid (หรือที่เรียกกันว่าเลย์เอาต์ก่ออิฐหรือเลย์เอาต์น้ำตก) เข้าไปใน CSS Grid Level 3

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

  • ได้ลองทำเดโม 4 แบบเพื่อใช้สร้างกลไก Masonry ใน CSS

    • สร้างเลย์เอาต์ Masonry/น้ำตกแบบดั้งเดิม
    • ใช้ความสามารถในการกำหนดคอลัมน์หลากหลายรูปแบบของ Grid
    • ใช้ความสามารถในการรวมคอลัมน์ของ Grid
    • ใช้ Subgrid และการจัดวางแบบ explicit

  • เมื่อนำความสามารถหลากหลายของ Grid มารวมกับ Masonry จะสามารถสร้างเลย์เอาต์ที่สร้างสรรค์และมีความไดนามิกได้มากขึ้น

    • กำหนดขนาดคอลัมน์ได้ยืดหยุ่นและหลากหลายด้วยหน่วย fr, max-content, min-content, ฟังก์ชัน minmax() เป็นต้น
    • ใช้การรวมคอลัมน์เพื่อเน้นบางไอเท็มหรือสร้างกริดที่มีสีสันหลากหลาย
    • ใช้ Subgrid เพื่อให้แทร็กของกริดที่ซ้อนกันสอดคล้องกับกริดแม่
    • ใช้การจัดวางแบบ explicit เพื่อกำหนดตำแหน่งของไอเท็มเฉพาะ เช่น header

  • มีความเห็นอีกด้านว่าควรแยกเลย์เอาต์ Masonry ออกเป็น display type ต่างหาก

    • มีความกังวลว่าการรวม CSS Grid กับ Masonry จะเพิ่มความซับซ้อนและอาจส่งผลลบต่อประสิทธิภาพ
    • หากแยก Masonry ออกจาก Grid ก็จะสามารถพัฒนาฟีเจอร์ของแต่ละส่วนได้อย่างอิสระ
    • แต่ก็มีความเห็นเช่นกันว่าควรทำ Masonry ให้เป็นเพียงเลย์เอาต์คอลัมน์ขนาดเท่ากันที่มีข้อจำกัดเท่านั้น

  • ผู้เขียนมองว่าการใส่ความสามารถของ Masonry ไว้ใน CSS Grid มีข้อดีมากกว่า

    • สเปก CSS Grid Level 3 ถูกเขียนขึ้นแล้วและมีการนำไปใช้งานในเอนจินเบราว์เซอร์ 2 ตัวแล้ว
    • ในอนาคตจะสามารถมอบความสามารถใหม่แบบเดียวกันให้ทั้ง Grid และ Masonry ได้ (เช่น การตกแต่งแทร็ก)
    • Masonry ก็เป็นกริดรูปแบบหนึ่งอยู่แล้ว จึงเข้ากันได้ดีในเชิงแนวคิด

  • อยากฟังความคิดเห็นจากนักออกแบบและนักพัฒนาเว็บ

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

  • ชื่อ Masonry อาจไม่เหมาะนัก อาจพิจารณาไวยากรณ์อย่าง grid-template-rows: off เพื่อสื่อความหมายว่าไม่มีแถว โปรดคำนึงด้วยว่าในอนาคตชื่ออาจเปลี่ยนแปลงได้

ความเห็นของ GN⁺

  • การเพิ่มความสามารถแบบ Masonry เข้าไปใน CSS Grid น่าจะเป็นการเปลี่ยนแปลงที่มีความหมายและช่วยเพิ่มพลังในการแสดงออกของเว็บเลย์เอาต์ได้มาก โดยเฉพาะการทำกริดแบบคอลัมน์ที่จัดวางเฉพาะแนวตั้งได้ง่ายขึ้นนั้นน่าสนใจมาก
  • ในอีกด้านหนึ่ง ค่อนข้างเห็นด้วยได้ยากกับแนวคิดที่จะแยก Masonry ออกเป็น display type ต่างหากและจำกัดความสามารถของมัน ตรงกันข้าม เมื่อผสานเข้ากับความสามารถอันทรงพลังของ Grid แล้ว ขอบเขตการใช้งานของเลย์เอาต์ Masonry น่าจะกว้างขึ้นอีกมาก
  • อย่างไรก็ตาม ชื่อ Masonry ไม่ค่อยสื่อความหมายตรงไปตรงมาและอาจทำให้สับสน จึงน่าจะลองพิจารณาชื่ออื่นที่สื่อถึงกริดสำหรับคอลัมน์โดยเฉพาะ เช่นไวยากรณ์ลักษณะ grid-template-rows: none ที่อธิบายความหมายว่าเป็น “กริดที่ไม่มีแถว” ได้ชัดเจนกว่า
  • คาดหวังว่าข้อเสนอนี้จะช่วยให้ CSS Grid กลายเป็นเครื่องมือที่ทรงพลังยิ่งขึ้น การทดลองกับกรณีเลย์เอาต์ที่หลากหลายและการแสดงความคิดเห็นอย่างจริงจังน่าจะเป็นสิ่งสำคัญ

บทความที่เกี่ยวข้อง

1 ความคิดเห็น

 
GN⁺ 2024-04-24
ความคิดเห็นจาก Hacker News

สรุป:

  • CSSWG และทีม DevRel ของผู้พัฒนาเบราว์เซอร์กำลังถกเถียงกันมาตั้งแต่ปี 2020 ถึงวิธีนำเลย์เอาต์ Masonry เข้าไปรวมเป็นส่วนหนึ่งของ CSS อย่างเป็นทางการ
    • ทีม WebKit ตัดสินใจเปิดการอภิปรายนี้ต่อสาธารณะเพื่อขอความคิดเห็นจากนักออกแบบและนักพัฒนา
    • นี่จะเป็นแบบอย่างสำคัญ และเป็นข้อถกเถียงเชิงพื้นฐานว่าควรมองตัวเลือกเลย์เอาต์ทั้งหมดเป็นส่วนหนึ่งของ CSS Grid หรือควรเพิ่ม CSS Display property ใหม่ต่อไปตามความจำเป็น
  • การเปรียบเลย์เอาต์ Masonry กับการก่ออิฐนั้นฟังดูสนุกดี แต่ถ้าก่ออิฐจริงแบบนั้นจะเป็นหายนะทางวิศวกรรมโครงสร้าง
  • เดโม Megamenu เป็นตัวอย่างของการใช้เลย์เอาต์ Masonry อย่างไม่เหมาะสม ทำให้ลำดับการอ่านพังและผิดจากที่คาดไว้อย่างมาก
    • ผู้ใช้ที่มีความบกพร่องทางการมองเห็นจะต้องอ่านในลำดับที่ "ผิด" เสมอ
    • ควรทำด้วยคอลัมน์โดยใช้ break-inside: avoid
  • เดโมหนังสือพิมพ์ก็น่าสงสัยเล็กน้อยด้วยเหตุผลคล้ายกัน
  • สำหรับรูปภาพหรือสื่อที่อยู่ในบล็อกอิสระ เลย์เอาต์ Masonry ทำงานได้ดีกว่า
  • เนื่องจากเดโมเหล่านี้สร้างบนพื้นฐานของ Grid layout จึงยังแสดงผลเป็นรูปแบบแถวคงที่ที่สมเหตุสมผลได้แม้ในเบราว์เซอร์ที่ไม่รองรับ
  • โดยรวมชอบความรู้สึกของเลย์เอาต์แบบ Masonry/Waterfall
    • แต่ก็น่าจะดีถ้ามีเลย์เอาต์ที่รักษาการไหลของการอ่านจากซ้ายไปขวาได้มากกว่ารูปแบบการจัดเรียง Masonry แบบปริยาย
  • มีการครุ่นคิดถึงวิธีออกแบบระบบเลย์เอาต์ที่สามารถมาแทน CSS ได้
    • สงสัยว่าระบบที่มีการใช้งานจริงอย่าง Qt, Tk, SwiftUI ฯลฯ มีจุดที่ดีกว่าหรือไม่
    • จะทำอย่างไรให้มีอินเทอร์เฟซที่ดีกว่าสำหรับนักพัฒนา?
  • มีการแนะนำกรณีตัวอย่างที่ทำเอฟเฟกต์ Masonry บนเว็บไซต์ภาพถ่ายของตนเองโดยไม่ใช้ JS
    • ใช้ display:inline-block เพื่อปฏิบัติต่อรูปภาพเหมือนข้อความและให้ reflow ไปขึ้นบรรทัดใหม่
    • พอใจกับผลลัพธ์มากกว่าไลบรารี Masonry
  • มีทั้ง Flexbox และ Grid layout อยู่แล้ว จึงตั้งคำถามว่าการเพิ่มตัวเลือก "layout" เข้าไปใน CSS อีกจะเหมาะสมหรือไม่
    • บางทีการสร้างระบบแบบ constraint-based ที่แม้จะซับซ้อนแต่ครอบคลุมทุกกรณีของเลย์เอาต์อาจเป็นทางออกที่ดีกว่า
  • รู้สึกดีที่ได้เห็นทีม WebKit กลับมาทำงานที่ยอดเยี่ยมอย่างเปิดเผยอีกครั้ง