CSS Grid Lanes

• ฟีเจอร์ CSS ใหม่ Grid Lanes สำหรับสร้าง เลย์เอาต์แบบ masonry บนเว็บ ถูกเพิ่มเข้ามาใน Safari Technology Preview 234
• สามารถใช้พร็อพเพอร์ตี display: grid-lanes เพื่อสร้าง กริดแบบ responsive โดยไม่ต้องใช้ media query และกำหนดคอลัมน์แบบยืดหยุ่นได้ด้วย grid-template-columns
• พร็อพเพอร์ตี item-tolerance ช่วยปรับความไวในการจัดวางรายการ เพื่อลดความไม่สมดุลทางสายตาที่เกิดจากความต่างของขนาดคอนเทนต์
• รองรับทั้งแนวคอลัมน์และแนวแถว โดยจะกำหนดทิศทางการไหลอัตโนมัติตาม grid-template-columns หรือ grid-template-rows
• CSS Working Group กำลังหารือเรื่องชื่อพร็อพเพอร์ตีบางส่วน ขณะที่ทีม WebKit เดินหน้าทั้งการทำมาตรฐานและการพัฒนาไปพร้อมกัน เพื่อส่งเสริมให้นักพัฒนาทดลองใช้งาน

---

ภาพรวมของ CSS Grid Lanes

• Grid Lanes คือ display mode ใหม่สำหรับสร้าง เลย์เอาต์สไตล์ masonry บนเว็บด้วย CSS แบบเนทีฟ
  • ใช้ display: grid-lanes และกำหนดค่าได้ด้วยไวยากรณ์คล้าย grid แบบเดิม
  • grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) ใช้สร้างคอลัมน์แบบยืดหยุ่นที่มีความกว้างขั้นต่ำ 250px
• ใช้พร็อพเพอร์ตี gap เพื่อกำหนด ระยะห่างระหว่างรายการ และรองรับทุกขนาดหน้าจอโดยไม่ต้องใช้ media query
• ทดลองใช้งานได้ ใน Safari Technology Preview 234 พร้อมเดโมเพจจาก WebKit

วิธีการทำงานของ Grid Lanes

• เบราว์เซอร์จะจัดวางแต่ละรายการลงใน คอลัมน์ที่อยู่ใกล้ด้านบนที่สุด โดยอัตโนมัติ
  • คล้ายกับ Masonry.js โดยรายการถัดไปจะถูกเพิ่มลงในคอลัมน์ที่สั้นที่สุดในขณะนั้น
  • เมื่อนำทางด้วย Tab ผู้ใช้สามารถ สำรวจคอนเทนต์ที่มองเห็นอยู่ในแนวนอน ได้
• เมื่อต้อง โหลดคอนเทนต์แบบ infinite scroll ก็สามารถจัดเรียงอัตโนมัติได้โดยไม่ต้องใช้ JavaScript

ความสามารถที่ขยายจาก CSS Grid

• ปรับขนาด lane ได้หลากหลาย: ใช้ไวยากรณ์ grid-template-* เพื่อสลับคอลัมน์แคบและคอลัมน์กว้างได้
  • ตัวอย่าง: grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr)
• รองรับ การขยายรายการ (span)
  • สามารถวางบางรายการให้กินพื้นที่หลายคอลัมน์ได้ (grid-column: span 4 เป็นต้น)
  • เดโมตัวอย่าง: เลย์เอาต์บทความแบบหนังสือพิมพ์
• รองรับ การจัดวางแบบ explicit
  • ตัวอย่าง: header { grid-column: -3 / -1; } เพื่อตรึง header ไว้ที่คอลัมน์ท้าย ๆ

ความสามารถในการสลับทิศทาง

• รองรับทั้งเลย์เอาต์ แบบอิงคอลัมน์ (waterfall) และ แบบอิงแถว (brick)
  • หากกำหนด grid-template-columns จะเป็นทิศทางคอลัมน์ และถ้ากำหนด grid-template-rows จะเป็นทิศทางแถวโดยอัตโนมัติ
• ค่าเริ่มต้นของ grid-auto-flow: normal จะใช้ตัดสินอัตโนมัติตามทิศทางที่กำหนดไว้
• CSS Working Group กำลังหารือเรื่องชื่อของพร็อพเพอร์ตีควบคุมทิศทางการไหล (grid-lanes-direction เป็นต้น)
  • การหารือที่เกี่ยวข้องกำลังดำเนินอยู่ใน GitHub CSSWG-drafts issue

การปรับความไวของการจัดวาง: item-tolerance

• item-tolerance ใช้กำหนดว่าจะต้องแยกความต่างของขนาดรายการอย่างเข้มงวดแค่ไหนระหว่างการจัดวาง
  • ค่าเริ่มต้นคือ 1em และความต่างที่น้อยกว่านี้จะถือว่าเป็นความสูงเท่ากัน
  • ยิ่งค่ามาก รายการก็จะ เลื่อนไปซ้ายขวาน้อยลง และถ้าค่าน้อยลงจะเกิด การปรับตำแหน่งที่ละเอียดขึ้น
• ในแง่การเข้าถึง ควรกำหนดค่าให้เหมาะสมเพื่อลด การกระโดดทางสายตาเมื่อใช้ Tab นำทาง
• ปัจจุบันชื่อพร็อพเพอร์ตีกำหนดเป็น item-tolerance แต่มีโอกาสเปลี่ยนเป็น flow-tolerance หรือ pack-tolerance

ตัวอย่างการทดลองและการใช้งาน

• Safari Technology Preview 234 มี เดโมหลายแบบ
  • เช่น แกลเลอรีภาพ, บทความสไตล์หนังสือพิมพ์, เว็บไซต์พิพิธภัณฑ์, และ เลย์เอาต์เมกะเมนู
• โค้ดตัวอย่าง:

  .container {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(max-content, 24ch));
    column-gap: 4lh;
  }
  

• มีประโยชน์ไม่ใช่แค่กับรูปภาพ แต่ยังเหมาะกับ footer หรือเมนูที่มีลิงก์จำนวนมาก

แผนในอนาคต

• CSS Working Group กำลังดำเนินการ ตัดสินใจเรื่องชื่อพร็อพเพอร์ตีที่เหลือ
• ทีม WebKit ทำทั้งการพัฒนาและการทำมาตรฐานควบคู่กัน มาตั้งแต่กลางปี 2022
• แนะนำให้นักพัฒนา สร้างเดโมและร่วมให้ฟีดแบ็ก
  • Jen Simmons กำลังเปิดรับความคิดเห็นผ่าน Bluesky และ Mastodon
• ไวยากรณ์พื้นฐานมีเสถียรภาพแล้ว และ พร้อมสำหรับการนำไปใช้ในโปรเจกต์จริง

[shakespeares]

งั้นก็ต้องเขียน Grid-lanes สำหรับ Safari กับ grid สำหรับ Firefox แยกกันอยู่ดีสิ ช่วยทำให้มันตรงตามเว็บมาตรฐานหน่อยเถอะ...

[GN⁺]

ความคิดเห็นจาก Hacker News

• ขอปรบมือให้ทีม Safari การที่พุ่งขึ้นไปอยู่บนสุดของอันดับ Interop 2025 แบบกะทันหันในเดือนตุลาคมนั้นน่าทึ่งจริงๆ

  • หลัง iOS 26 รู้สึกได้เลยว่า Safari ได้รับอัปเดตฟีเจอร์เว็บครั้งใหญ่ ไม่ใช่แค่ WebGPU เท่านั้น แต่ยังเติมส่วนที่ขาดของ OPFS API จนตอนนี้ใช้งานจริงได้แล้ว นอกจากนี้ยังเพิ่มพร็อพเพอร์ตี CSS field-sizing เข้ามา เพื่อแก้ปัญหาที่ช่องกรอกข้อความจะขยายตามเนื้อหาที่ป้อนเข้าไปโดยอัตโนมัติ
  • Safari มักถูกยกให้เป็น “เบราว์เซอร์ที่ดีที่สุด” ทุกครั้งที่มีรีลีสใหญ่ แต่ในช่วงเวลาอื่นก็มักโดนวิจารณ์มาก น่าจะเป็นเพราะเบราว์เซอร์อื่นๆ อัปเดตกันอย่างต่อเนื่อง ขณะที่ Safari ยังยึดตามรอบการออกรุ่นแบบดั้งเดิม
  • จริงๆ ก็ไม่ได้น่าแปลกใจนัก เพราะช่วงหลายปีมานี้เห็นทีม Safari ทยอยปล่อยฟีเจอร์ HTML และ CSS สมัยใหม่มาอย่างสม่ำเสมอ
  • ระหว่างที่ทีม Chrome โปรโมตฟีเจอร์ทดลองอย่าง WebPCIe นั้น Safari กลับส่งมอบฟีเจอร์ที่ผู้ใช้ต้องการจริงๆ มาโดยตลอด ตัวอย่างเช่นรองรับเอฟเฟกต์พื้นหลังเบลอก่อนใครนานแล้ว
  • แต่ก็น่าเสียดายที่ Safari ยังไม่รองรับ wasm แบบ 64 บิต แม้ว่าในรายการฟีเจอร์ของ WebAssembly จะเขียนว่า “รองรับ 100%” แต่ในความเป็นจริงยังขาดส่วนสำคัญอยู่

• หวังว่าฟีเจอร์ CSS Gap Decorations จะออกมาเร็วๆ เบื่อแล้วที่ต้องใช้วิธีแฮ็กที่ไม่จำเป็น เพื่อทำเส้นคั่นสวยๆ ระหว่างไอเท็มใน flex หรือ grid

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

• เมื่อไม่นานมานี้ใช้เลย์เอาต์ Masonry ในโปรเจ็กต์หนึ่ง ประสิทธิภาพก็โอเค แต่เพราะอิงกับabsolute positioning เลยค่อนข้างแฮ็ก ต้องรู้สัดส่วนภาพล่วงหน้า และต้องคำนวณใหม่เวลา resize ดังนั้นจึงหวังว่าจะมีการรองรับแบบเนทีฟออกมาเร็วๆ

  • ฉันก็รู้สึกเหมือนกัน กำลังรอให้ CSS มาแก้ปัญหานี้อยู่ และรอวันที่จะลบ JavaScript 1.3KB สุดท้ายออกจากหน้าโฮมเพจของตัวเองได้ตั้งแต่ปี 2019 ขอขอบคุณทุกคนที่สร้างฟีเจอร์นี้

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

• เลย์เอาต์ Masonry ดูดีก็จริง แต่รู้สึกว่ามันทำให้มองภาพทั้งหมดได้ยาก

  • งาน “ออกแบบ” บนเว็บจำนวนมากให้ความสำคัญกับหน้าตามากกว่าการใช้งาน คนที่ได้ลองใช้ผลิตภัณฑ์จริงมีน้อยมาก ส่วนใหญ่แค่ดูแอนิเมชันตอนเลื่อนแล้วพูดว่า “เท่ดี”
  • ถ้าภาพทั้งหมดเป็นแนวนอนหรือแนวตั้งเหมือนกันก็ยังพอไหว แต่ถ้าปะปนกันเมื่อไร เลย์เอาต์จะเละทันที

• สงสัยว่าทำไมถึงไม่ตั้งชื่อว่า Masonry ถึงอย่างนั้นชื่อ grid-lanes ก็อธิบายตัวเองได้ดีและเข้าใจง่าย

• สงสัยว่า LLM จะใช้เวลานานแค่ไหนกว่าจะเรียนรู้ไวยากรณ์ CSS แบบใหม่นี้ได้อย่างแม่นยำ

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

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

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

  • แต่ถ้าไม่จำเป็นต้องดูทุกองค์ประกอบอย่างเป็นระบบ เลย์เอาต์แบบ lane ก็โอเค มันเหมาะกับเว็บไซต์ที่เน้นให้ซึมซับคอนเทนต์ได้ในพริบตาอย่าง Pinterest
  • มันดูดี แต่ถ้าจะใช้งานแบบจริงจังลึกๆ แล้วเป็นเลย์เอาต์ที่ไม่ค่อยสะดวก
  • เป้าหมายไม่ใช่ประสิทธิภาพ แต่คือการทำให้เห็นภาพรวมทั้งหมดในคราวเดียว เหมือนหนังสือพิมพ์หรือแกลเลอรีภาพ
  • น่าขันดีที่ฟีเจอร์เพิ่งออกมาตอนที่กระแสกำลังจะหมด แม้ในเชิง UX จะไม่ค่อยดี แต่ในเชิงภาพลักษณ์มันสวย
  • ให้ความรู้สึกแบบดีไซน์สายสมองขวา เหมาะกับเว็บอย่าง Pinterest หรือ Home Assistant

• คิดว่า Apple ควรทำให้ดาวน์โหลด Safari ไปใช้บนทุกแพลตฟอร์มได้อย่างเสถียร

  • จำได้ว่าเคยติดตั้ง Safari บน Windows XP มาแล้ว ดูเหมือนเวลาจะยังผ่านไปไม่มากพอหลังจากความล้มเหลวครั้งนั้น
  • แต่ในทางอ้อมอาจเป็นไปได้ เบราว์เซอร์ใหม่ของ Kagi ใช้ WebKit และตอนนี้ยังมีเฉพาะบน macOS แต่ก็มีแผนจะออกเวอร์ชัน Windowsในอนาคต