ตารางกริด 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 */
}
![ภาพหน้าจอของเครื่องมือสำหรับนักพัฒนาเว็บแบบตารางกริด CSS ซึ่งแสดง 2 คอลัมน์คู่กันโดยมีชื่ออยู่ที่จุดเริ่มต้นของบรรทัดคอลัมน์](https://web.dev/articles/css-subgrid/images/subgrid3.avif?authuser=6&hl=th)
เพียงเท่านี้คอลัมน์ของตารางกริดระดับบนสุดก็ได้รับการส่งต่อในระดับไปยังตารางกริดย่อยอย่างมีประสิทธิภาพ ตอนนี้ตารางกริดย่อยนี้จะกำหนดคอลัมน์ย่อยให้กับคอลัมน์ใดก็ได้
ขอท้า! ทำซ้ำการสาธิตเดิม แต่ทำสำหรับ grid-template-rows
แชร์ตารางกริด "มาโคร" ระดับหน้าเว็บ
นักออกแบบมักจะทำงานร่วมกับตารางกริดที่ใช้ร่วมกัน วาดเส้นทับงานออกแบบทั้งชิ้นเพื่อจัดแนวองค์ประกอบที่ต้องการ ตอนนี้นักพัฒนาเว็บก็ทำได้แล้ว และคุณก็บรรลุเวิร์กโฟลว์นี้จริงและอีกมากมาย
การนำเวิร์กโฟลว์แบบตารางกริดของนักออกแบบที่ใช้กันมากที่สุดมาใช้จะช่วยให้เห็นข้อมูลเชิงลึกที่ยอดเยี่ยมเกี่ยวกับความสามารถ เวิร์กโฟลว์ และศักยภาพของ subgrid
นี่คือภาพหน้าจอจาก Chrome DevTools ของตารางกริดมาโครเลย์เอาต์หน้าเว็บบนอุปกรณ์เคลื่อนที่ เส้นมีชื่อและมีพื้นที่ที่ชัดเจนสำหรับการวางองค์ประกอบ
![ภาพหน้าจอจากเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome CSS ซึ่งแสดงเลย์เอาต์ตารางกริดขนาดสำหรับอุปกรณ์เคลื่อนที่
ซึ่งมีการตั้งชื่อแถวและคอลัมน์เพื่อให้ระบุได้อย่างรวดเร็ว เช่น แบบเต็ม,
สถานะของระบบ, หน้าหลัก, ส่วนหัวหลัก, หลัก, ส่วนท้าย และท่าทางสัมผัสของระบบ](https://web.dev/articles/css-subgrid/images/subgrid4.avif?authuser=6&hl=th)
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;
}
![การจัดวางมาโครที่เสร็จสมบูรณ์ พร้อมรูปภาพที่ซ้อนกันเต็มความกว้างวางอยู่อย่างไม่เหมาะสมโดยไม่ทำให้แถวการนำทางและส่วนหัวหลักและแถวแนวนอนยาวขึ้น และขยายไปยังแต่ละบรรทัดของคอลัมน์ที่มีชื่อแบบเต็ม](https://web.dev/articles/css-subgrid/images/subgrid7.avif?authuser=6&hl=th)
ตอนนี้คุณก็ใช้ตารางมาโครอย่างที่นักออกแบบใช้และนำมาใช้ใน 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 กับรูปภาพแบบเต็มพื้นที่ในบทความ