ตารางกริดย่อยของ 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 หรือไม่ ซึ่งหากเป็น "จริง" หมายความว่าจะใช้ตารางกริดย่อยได้

@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
• การ์ด
  • 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 กับรูปภาพแบบเต็มพื้นที่ในบทความ

ส่วนหนึ่งของชุดหนังสือที่ทำงานร่วมกันแบบใหม่