หน้านี้ได้รับการแปลโดย 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 */
}

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

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

ขอท้า ทำซ้ำเดโมเดียวกันนี้ แต่ให้ทำกับ grid-template-rows

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

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

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

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

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

ภาพหน้าจอจากเครื่องมือสำหรับนักพัฒนาเว็บใน 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 เหมือนเดิม แต่คราวนี้แสดง 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 ปี

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

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

แหล่งข้อมูล

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