ตารางกริดย่อยของ CSS

ตาราง 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 ซึ่ง true หมายความว่าสามารถใช้ตารางกริดย่อย

@supports (grid-template-columns: subgrid) {
  /* safe to enhance to */
}

Devtools

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
• การ์ด
  • Codepen โดย Jhey
  • Codepen โดย Ahmad Shadeed
  • Codepen โดย Takeshi Kano
  • Codepen โดย Arvid
  • Codepen โดย Chris Coyier
  • Codepen โดย Miriam Suzanne
• Chris Coyier กับแบบฟอร์ม
• Facundo Corradini พร้อมการจัดเรียงแบบฟอร์ม
• Chris Coyier กับเครื่องหมายรายการที่ปรับแนว
• Michelle Barker โผล่ออกมาจากคอนเทนเนอร์เพื่อให้อยู่ในแนวเดียวกับตารางกริดระดับบนสุด
• Miriam Suzanne แสดงชื่อเส้นที่มีชื่อและการโต้ตอบกับตารางย่อย
• Kevin Powell พร้อมข้อมูลเบื้องต้นเกี่ยวกับพื้นที่ที่มีชื่อ
• Kevin Powell กับรายชื่อเพลงที่สอดคล้องกัน
• Shannon Moeller กับรายชื่อที่สอดคล้องกัน
• Kevin Powell มีการใช้ตารางกริดระดับหน้าที่ส่งไปยังคอมโพเนนต์ต่างๆ
• Elad Shechter กับการวางซ้อนเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และเนื้อหาสำรอง
• Aaron Iker ใช้แบบอักษรกับตารางกริดย่อยเพื่อจัดแนวบรรทัดฐานของเชิงอรรถ
• Adam Argyle แสดงรูปภาพแบบเต็มหน้าในบทความ