หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

ก่อนตารางย่อย เนื้อหามักได้รับการปรับแต่งด้วยตนเองเพื่อหลีกเลี่ยงเลย์เอาต์ที่ไม่เป็นระเบียบ เช่น อันนี้

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

หลังตารางกริดย่อย ก็อาจจัดเนื้อหาที่มีขนาดต่างกันได้

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

การรองรับเบราว์เซอร์

แหล่งที่มา

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

ต่อไปนี้เป็นกรณีการใช้งานที่เข้าใจง่ายซึ่งจะแนะนำพื้นฐานของ 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 */
}

ภาพหน้าจอของ DevTools ตาราง CSS ที่แสดง 2 คอลัมน์เคียงข้างกันพร้อมชื่อที่เริ่มต้นบรรทัดของคอลัมน์ — https://codepen.io/web-dot-dev/pen/NWezjXv

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

ขอท้า ทำซ้ำการสาธิตเดิม แต่ทำเป็นเวลา grid-template-rows

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

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

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

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

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

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

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

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

Devtools

Chrome, Edge, Firefox และ Safari ล้วนมีเครื่องมือสำหรับนักพัฒนาเว็บแบบตารางกริด CSS ที่ยอดเยี่ยม และ Chrome Edge และ Firefox มีเครื่องมือเฉพาะสำหรับให้ความช่วยเหลือเกี่ยวกับตารางกริดย่อย ประกาศเปิดตัว Chrome เครื่องมือของตนใน 115 ขณะที่ Firefox มีให้ใช้งานมาแล้วอย่างน้อย 1 ปี

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

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

แหล่งข้อมูล

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