ตารางกริด CSS เป็นเครื่องมือเลย์เอาต์ที่มีประสิทธิภาพมาก แต่แทร็กแถวและคอลัมน์ที่สร้างขึ้นในตารางกริดระดับบนสุดจะใช้เพื่อจัดตำแหน่งรายการย่อยโดยตรงของคอนเทนเนอร์ตารางกริดได้เท่านั้น พื้นที่ตารางและเส้นที่มีชื่อที่ผู้เขียนกำหนดหายไปในองค์ประกอบอื่นนอกเหนือจากองค์ประกอบย่อยโดยตรง เมื่อใช้ subgrid
การปรับขนาดแทร็ก คุณจะแชร์เทมเพลตและชื่อกับตารางกริดที่ซ้อนกันได้ บทความนี้อธิบายวิธีการทำงาน
ก่อนตารางกริดย่อย เนื้อหามักได้รับการปรับแต่งเพื่อหลีกเลี่ยงการออกแบบที่คลุมเครือเช่นนี้
หลังตารางย่อย สามารถจัดเนื้อหาที่มีขนาดต่างๆ ให้สอดคล้องกันได้
ข้อมูลเบื้องต้นเกี่ยวกับตารางกริดย่อย
ต่อไปนี้เป็นกรณีการใช้งานที่ไม่ซับซ้อน ซึ่งจะแนะนำข้อมูลพื้นฐานของ CSS subgrid
ตารางกริดกำหนดด้วยคอลัมน์ที่มีชื่อ 2 คอลัมน์ คอลัมน์แรกกว้าง 20ch
และคอลัมน์ที่ 2 คือ "ส่วนที่เหลือ" ของพื้นที่ทำงาน 1fr
ชื่อคอลัมน์ไม่จำเป็นต้องมี
แต่เหมาะสำหรับการอธิบายและการศึกษา
.grid {
display: grid;
gap: 1rem;
grid-template-columns: [column-1] 20ch [column-2] 1fr;
}
จากนั้นตารางย่อยของตารางกริดนั้นครอบคลุมทั้ง 2 คอลัมน์ ตั้งค่าเป็นคอนเทนเนอร์ตารางกริด และนำคอลัมน์ของระดับบนสุดมาใช้โดยตั้งค่า grid-template-columns
เป็น subgrid
.grid > .subgrid {
grid-column: span 2;
display: grid;
grid-template-columns: subgrid; /* 20ch 1fr */
}
เพียงเท่านี้ คอลัมน์ของตารางกริดระดับบนสุดก็ได้ส่งต่อระดับไปยังตารางกริดย่อยอย่างมีประสิทธิภาพ ตอนนี้ตารางกริดย่อยนี้จะกำหนดคอลัมน์ย่อยให้คอลัมน์ใดคอลัมน์หนึ่งเหล่านั้นได้
ขอท้า! ทำขั้นตอนการสาธิตเดิมซ้ำ แต่ดำเนินการสำหรับ grid-template-rows
แชร์ตารางกริด "มาโคร" ระดับหน้าเว็บ
นักออกแบบมักจะทำงานกับตารางกริดที่ใช้ร่วมกัน ลากเส้นทับการออกแบบทั้งหมดเพื่อจัดองค์ประกอบทุกอย่างที่ต้องการ ตอนนี้นักพัฒนาเว็บก็ทําได้เช่นกัน ตอนนี้คุณก็ทำเวิร์กโฟลว์นี้สำเร็จและอื่นๆ อีกมากมาย
การนำเวิร์กโฟลว์ตารางกริดของนักออกแบบที่ใช้กันมากที่สุดมาใช้จะช่วยให้ได้ข้อมูลเชิงลึกที่ยอดเยี่ยมเกี่ยวกับความสามารถ เวิร์กโฟลว์ และศักยภาพของ subgrid
นี่คือภาพหน้าจอจาก Chrome DevTools ของตารางกริดมาโครเลย์เอาต์หน้าเว็บในอุปกรณ์เคลื่อนที่ เส้นมีชื่อและมีพื้นที่ที่ชัดเจนสำหรับการวางองค์ประกอบ
CSS ต่อไปนี้สร้างตารางกริด โดยมีแถวและคอลัมน์ที่มีชื่อสำหรับเลย์เอาต์อุปกรณ์ แต่ละแถวและคอลัมน์จะมีขนาด
.device {
display: grid;
grid-template-rows:
[system-status] 3.5rem
[primary-nav] 3rem
[primary-header] 4rem
[main] auto
[footer] 4rem
[system-gestures] 2rem
;
grid-template-columns: [fullbleed-start] 1rem [main-start] auto [main-end] 1rem [fullbleed-end];
}
สไตล์เพิ่มเติมบางส่วนจะมีการออกแบบดังต่อไปนี้
ในระดับบนสุดนี้มีองค์ประกอบต่างๆ ที่ฝังอยู่ การออกแบบนี้ต้องใช้รูปภาพแบบเต็มความกว้าง
ในแถวการนำทางและส่วนหัว ชื่อบรรทัดคอลัมน์ซ้ายและขวาสุดคือ fullbleed-start
และ fullbleed-end
เส้นตารางการตั้งชื่อด้วยวิธีนี้ช่วยให้เด็กจัดแนวให้ตรงกันกับตำแหน่งย่อของ fullbleed
ได้พร้อมกัน เราถือว่าสะดวกมากเพราะคุณจะเห็นในเร็วๆ นี้
เมื่อเลย์เอาต์อุปกรณ์โดยรวมสร้างขึ้นด้วยแถวและคอลัมน์ที่มีชื่อเหมาะสม ให้ใช้ subgrid
เพื่อส่งแถวและคอลัมน์ที่มีชื่อเหมาะสมไปยังเลย์เอาต์ตารางกริดที่ซ้อนกัน นี่คือช่วงเวลาสุดพิเศษของ subgrid
เลย์เอาต์ของอุปกรณ์จะส่งแถวและคอลัมน์ที่มีชื่อไปยังคอนเทนเนอร์ของแอป แล้วส่งไปยังคอนเทนเนอร์ย่อยทุกรายการ
.device > .app,
.app > * {
display: grid;
grid: subgrid / subgrid;
/* same as */
grid-template-rows: subgrid;
grid-template-columns: subgrid;
}
ตารางกริดย่อยของ CSS คือค่าที่ใช้แทนรายการแทร็กตารางกริด แถวและคอลัมน์ที่องค์ประกอบขยายมาจากระดับบนสุด เปลี่ยนเป็นแถวและคอลัมน์เดียวกับที่มีให้ ซึ่งจะทำให้ชื่อบรรทัดจากตารางกริด .device
ปรากฏสำหรับบุตรหลานของ .app
แทนที่จะเป็น .app
เท่านั้น องค์ประกอบใน .app
ไม่สามารถอ้างอิงแทร็กตารางกริดที่สร้างโดย .device
ก่อนตารางกริดย่อยได้
ทั้งหมดนี้ทำให้รูปภาพที่ฝังอยู่ในเลย์เอาต์แบบเต็มขนาดได้ด้วย subgrid
ไม่มีค่าหรือลูกเล่นใดๆ เลย แต่ใช้เพียงบรรทัดเดียวที่น่าสนใจว่า "การจัดวางของฉันครอบคลุมตั้งแต่ fullbleed-start
ถึง fullbleed-end
"
.app > main img {
grid-area: fullbleed;
}
เท่านี้ก็เรียบร้อย ตารางมาโครอย่างที่นักออกแบบใช้และนำมาใช้ใน CSS แนวคิดนี้สามารถปรับขนาดและเติบโตไปพร้อมกับคุณได้ตามต้องการ
ตรวจสอบการสนับสนุน
การเพิ่มประสิทธิภาพแบบต่อเนื่องด้วย CSS และตารางย่อยเป็นสิ่งที่คุ้นเคยและไม่ซับซ้อน
ใช้ @supports
และในวงเล็บจะถามเบราว์เซอร์ว่าระบบเข้าใจตารางย่อยเป็นค่าสําหรับคอลัมน์หรือแถวของเทมเพลตไหม ตัวอย่างต่อไปนี้จะตรวจสอบว่าพร็อพเพอร์ตี้ grid-template-columns
รองรับคีย์เวิร์ด subgrid
หรือไม่ ซึ่งหากเป็น "จริง" หมายความว่าจะใช้ตารางกริดย่อยได้
@supports (grid-template-columns: subgrid) {
/* safe to enhance to */
}
เครื่องมือสำหรับนักพัฒนาเว็บ
ทั้ง Chrome, Edge, Firefox และ Safari ต่างก็มีเครื่องมือสำหรับนักพัฒนาเว็บใน CSS ที่ยอดเยี่ยม และ Chrome Edge และ Firefox ก็มีเครื่องมือเฉพาะสำหรับการช่วยตารางกริดย่อย Chrome ได้ประกาศเปิดตัวเครื่องมือใน 115 ในขณะที่ Firefox เปิดตัวมานานกว่า 1 ปีแล้ว
ป้ายตารางกริดย่อยทำหน้าที่เหมือนป้ายตารางกริด แต่จะแยกความแตกต่างระหว่างตารางกริดย่อยและตารางกริดที่ไม่ใช่ตารางกริด
แหล่งข้อมูล
รายการนี้จะรวบรวมบทความตารางย่อย การสาธิต และแรงบันดาลใจโดยรวมสำหรับการเริ่มต้นใช้งาน หากคุณกำลังมองหาขั้นตอนถัดไปสำหรับการเรียนรู้ กลุ่มย่อย ขอให้สนุกกับการสำรวจแหล่งข้อมูลที่ยอดเยี่ยมเหล่านี้
- MDN
- Rachel Andrew พร้อมคำบรรยายวิดีโอที่สอดคล้องกัน
- Rachel Andrew กับตัวอย่างที่ยอดเยี่ยม 10 รายการ
- Rachel Andrew กับตัวอย่างเนื้อหา
- บทความของ Ahmad Shadeed
- Michelle Barker จากงาน CSS Day ปี 2022
- การ์ด
- Chris Coyier กับฟอร์ม
- Facundo Corradini ในการปรับแบบฟอร์ม
- Chris Coyier จัดตำแหน่งเครื่องหมายสินค้าให้สอดคล้องกัน
- Michelle Barker โผล่ออกมาจากคอนเทนเนอร์เพื่อให้สอดคล้องกับตารางกริดระดับบนสุด
- Miriam Suzanne แสดงชื่อบรรทัดที่มีชื่อและการโต้ตอบในตารางกริดย่อย
- Kevin Powell พูดถึงข้อมูลเบื้องต้นเกี่ยวกับพื้นที่ที่ตั้งชื่อไว้
- Kevin Powell พูดถึงลิสต์ที่ตรงกัน
- Shannon Moeller กับลิสต์ที่ตรงกัน
- Kevin Powell กับตารางกริดระดับหน้าเว็บที่ถูกส่งไปยังคอมโพเนนต์
- Elad Shechter ที่มีการวางซ้อนและเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สำรอง
- Aaron Iker พร้อมกับการใช้ตารางกริดย่อยอย่างสวยงามเพื่อจัดวางเชิงอรรถพื้นฐาน
- Adam Argyle กับรูปภาพแบบเต็มพื้นที่ในบทความ
ส่วนหนึ่งของชุดหนังสือที่ทำงานร่วมกันแบบใหม่