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

ตารางกริด CSS เป็นเครื่องมือเลย์เอาต์ที่มีประสิทธิภาพมาก แต่แทร็กแถวและคอลัมน์ที่สร้างขึ้นในตารางกริดระดับบนสุดจะใช้เพื่อจัดตำแหน่งรายการย่อยโดยตรงของคอนเทนเนอร์ตารางกริดได้เท่านั้น พื้นที่ตารางและเส้นที่มีชื่อที่ผู้เขียนกำหนดหายไปในองค์ประกอบอื่นนอกเหนือจากองค์ประกอบย่อยโดยตรง เมื่อใช้ subgrid การปรับขนาดแทร็ก คุณจะแชร์เทมเพลตและชื่อกับตารางกริดที่ซ้อนกันได้ บทความนี้อธิบายวิธีการทำงาน

ก่อนตารางกริดย่อย เนื้อหามักได้รับการปรับแต่งเพื่อหลีกเลี่ยงการออกแบบที่คลุมเครือเช่นนี้

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

หลังตารางย่อย สามารถจัดเนื้อหาที่มีขนาดต่างๆ ให้สอดคล้องกันได้

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

การสนับสนุนเบราว์เซอร์

  • 117
  • 117
  • 71
  • 16

แหล่งที่มา

ข้อมูลเบื้องต้นเกี่ยวกับตารางกริดย่อย

ต่อไปนี้เป็นกรณีการใช้งานที่ไม่ซับซ้อน ซึ่งจะแนะนำข้อมูลพื้นฐานของ 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://codepen.io/web-dot-dev/pen/NWezjXv

เพียงเท่านี้ คอลัมน์ของตารางกริดระดับบนสุดก็ได้ส่งต่อระดับไปยังตารางกริดย่อยอย่างมีประสิทธิภาพ ตอนนี้ตารางกริดย่อยนี้จะกำหนดคอลัมน์ย่อยให้คอลัมน์ใดคอลัมน์หนึ่งเหล่านั้นได้

ขอท้า! ทำขั้นตอนการสาธิตเดิมซ้ำ แต่ดำเนินการสำหรับ grid-template-rows

แชร์ตารางกริด "มาโคร" ระดับหน้าเว็บ

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

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

การนำเวิร์กโฟลว์ตารางกริดของนักออกแบบที่ใช้กันมากที่สุดมาใช้จะช่วยให้ได้ข้อมูลเชิงลึกที่ยอดเยี่ยมเกี่ยวกับความสามารถ เวิร์กโฟลว์ และศักยภาพของ subgrid

นี่คือภาพหน้าจอจาก Chrome DevTools ของตารางกริดมาโครเลย์เอาต์หน้าเว็บในอุปกรณ์เคลื่อนที่ เส้นมีชื่อและมีพื้นที่ที่ชัดเจนสำหรับการวางองค์ประกอบ

ภาพหน้าจอจากเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome CSS ซึ่งแสดงเลย์เอาต์ตารางกริดขนาดสำหรับอุปกรณ์เคลื่อนที่ ซึ่งมีการตั้งชื่อแถวและคอลัมน์เพื่อให้ระบุได้อย่างรวดเร็ว เช่น แบบเต็มขอบ, สถานะระบบ, หน้าหลัก, ส่วนหัวหลัก, หลัก, ส่วนท้าย และท่าทางสัมผัสของระบบ

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];
}

สไตล์เพิ่มเติมบางส่วนจะมีการออกแบบดังต่อไปนี้

การวางซ้อนตารางกริด CSS DevTools เหมือนเดิม แต่ครั้งนี้มี UI ของระบบอุปกรณ์เคลื่อนที่บางส่วน เงา และสีเล็กน้อย ช่วยให้เห็นถึงทิศทาง ของการออกแบบ

ในระดับบนสุดนี้มีองค์ประกอบต่างๆ ที่ฝังอยู่ การออกแบบนี้ต้องใช้รูปภาพแบบเต็มความกว้าง ในแถวการนำทางและส่วนหัว ชื่อบรรทัดคอลัมน์ซ้ายและขวาสุดคือ 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://codepen.io/web-dot-dev/pen/WNLyjzX

เท่านี้ก็เรียบร้อย ตารางมาโครอย่างที่นักออกแบบใช้และนำมาใช้ใน 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 ปีแล้ว

ตัวอย่างภาพหน้าจอของป้ายตารางกริดย่อยที่พบในองค์ประกอบในแผงองค์ประกอบ

ป้ายตารางกริดย่อยทำหน้าที่เหมือนป้ายตารางกริด แต่จะแยกความแตกต่างระหว่างตารางกริดย่อยและตารางกริดที่ไม่ใช่ตารางกริด

แหล่งข้อมูล

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

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