ตารางกริดย่อยของ 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 เหมือนเดิม แต่ครั้งนี้กลับมี 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 ปีแล้ว

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

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

แหล่งข้อมูล

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