เผยแพร่: 14 มกราคม 2026
ตั้งแต่ Chrome 145 เป็นต้นไป ระบบจะรองรับพร็อพเพอร์ตี้ column-wrap และ column-height จาก
ข้อกําหนดระดับที่ 2 ของเลย์เอาต์แบบหลายคอลัมน์
พร็อพเพอร์ตี้เหล่านี้ช่วยให้คุณตัดคอลัมน์ขึ้นบรรทัดใหม่
ในทิศทางของบล็อกได้
ก่อน Chrome 145 หากมีการจำกัดความสูงของคอนเทนเนอร์แบบหลายคอลัมน์ เนื้อหาที่ไม่พอดีกับพื้นที่ว่างจะปรากฏเป็นคอลัมน์ที่ล้น ในทิศทางแบบอินไลน์ ซึ่งจะสร้างแถบเลื่อนแนวนอนบน เว็บ
พร็อพเพอร์ตี้ column-height และ column-wrap ช่วยให้คุณกำหนดความสูงสำหรับ
แถวของคอลัมน์และตั้งค่าคอลัมน์ที่ล้นให้ปรากฏเป็นแถวใหม่ได้
การสร้างแถวใหม่ของคอลัมน์ช่วยให้คุณหลีกเลี่ยงสถานการณ์ปัจจุบันที่ต้องเลือกระหว่างการทำให้ผู้ใช้ต้องเลื่อนขึ้นและลงเพื่ออ่านคอลัมน์ หรือเสี่ยงที่จะมีแถบเลื่อนแนวนอนในกรณีที่มีเนื้อหาจำนวนมากที่คาดเดาไม่ได้
นอกจากนี้ ยังเปิดใช้รูปแบบต่างๆ เช่น ภาพสไลด์แบบบล็อกทิศทาง ซึ่งจะสร้างคอลัมน์ที่เติมความสูงของ Viewport ที่ใช้ได้ หากต้องการอ่านแถวถัดไปของคอลัมน์ ให้เลื่อนไปที่หน้าจอถัดไปในทิศทางของบล็อก
สร้างประสบการณ์การอ่านที่ชัดเจน
การมีคอลัมน์หลายแถวอาจทำให้ประสบการณ์การอ่านไม่ชัดเจน เนื่องจากผู้อ่านอาจไม่ทราบว่ามีหลายแถว และข้ามช่องว่างเพื่ออ่านคอลัมน์ต่อไป ซึ่งเป็น สิ่งที่ควรพิจารณาในการออกแบบ UI ความสามารถในการ เพิ่มการตกแต่งในช่องว่างระหว่างแถวที่กำลังจะเปิดตัวจะช่วยให้คุณมีเครื่องมือเพิ่มเติมในการสร้าง ความแตกต่างทางภาพนี้
กฎของแถวจะพร้อมใช้งานเร็วๆ นี้
ข้อกำหนดระดับ 1 ของหลายคอลัมน์มีพร็อพเพอร์ตี้สำหรับการจัดรูปแบบ กฎคอลัมน์ ซึ่งกฎนี้จะอยู่ในช่องว่างระหว่างคอลัมน์ พร็อพเพอร์ตี้สำหรับ การจัดรูปแบบกฎแถวรวมอยู่ใน ข้อกำหนดการตกแต่งช่องว่าง CSS ใหม่ ซึ่งปัจจุบันอยู่ระหว่างช่วงทดลองใช้สำหรับนักพัฒนาซอฟต์แวร์ เมื่อฟีเจอร์นี้เสถียรแล้ว คุณจะเพิ่มกฎแถวและคอลัมน์ในกริด Flexbox และ multicol ได้