Subgrid สำหรับเนื้อหาซ้อนที่จัดแนวตรงกัน

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

subgrid เป็นค่าสำหรับ grid-template-columns หรือ grid-template-rows ซึ่งทำให้กริดที่ซ้อนอยู่ สืบทอดและมีส่วนร่วมใน คำจำกัดความของแทร็กในกริดแม่

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

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

หากไม่มีซับกริด คุณสามารถจัดแนวเนื้อหาได้บางส่วนโดยใช้ align-content หรือกำหนดความสูงตายตัว แต่วิธีนี้ไม่ยืดหยุ่น ซับกริดช่วยให้จัดแนวได้อย่างแท้จริงโดยอิงจากความสูงจริงของเนื้อหา

การจัดแนวคู่ป้ายกำกับกับช่องป้อนข้อมูลข้ามคอลัมน์ของแบบฟอร์มหลายคอลัมน์:

ซับกริดสามารถครอบคลุมแทร็กของกริดแม่ได้หลายแทร็ก และสืบทอดแทร็กจากทั้งสองทิศทาง:

เมื่อซับกริดสืบทอดแทร็กที่มีชื่อจากกริดแม่ ชื่อเหล่านั้นจะพร้อมให้ใช้กำหนดตำแหน่งภายในคอนเทนเนอร์ซับกริด

ซับกริดจะสืบทอดค่าของ gap จากกริดแม่ตามค่าเริ่มต้น กริดที่ซ้อนอยู่จะใช้ระบบช่องว่างระหว่างคอลัมน์และแถวเดียวกัน

ไฟร์ฟอกซ์รองรับซับกริดมาตั้งแต่ปี 2019 โครมเพิ่มการรองรับในปี 2023 ปัจจุบันเบราว์เซอร์สมัยใหม่ทั้งหมดรองรับแล้ว โปรดตรวจสอบการรองรับสำหรับกลุ่มผู้ใช้เป้าหมายก่อนนำไปใช้ในสภาพแวดล้อมจริง

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

การใช้ grid-template-rows: subgrid กับรายการกริดมีหน้าที่อะไร

ซับกริดช่วยแก้ปัญหาการจัดแนวเนื้อหากริดที่ซ้อนอยู่ เช่น กริดการ์ดที่รายการในการ์ดแยกกันต้องจัดแนวกับเส้นฐานเดียวกัน ให้ใช้ grid-template-rows: subgrid กับรายการกริดที่ครอบคลุมหลายแถว และใช้ grid-template-columns: subgrid สำหรับเนื้อหาที่ซ้อนอยู่และต้องจัดแนวตามคอลัมน์ ปัจจุบันเบราว์เซอร์สมัยใหม่รองรับฟีเจอร์นี้ทั้งหมดแล้ว