CSS Grid ระดับ 2: มาแล้ว Subgrid

ขณะนี้เราใช้เวลามากกว่าหนึ่งปีแล้วจาก CSS Grid Layout ที่เชื่อมโยงไปถึงเบราว์เซอร์ส่วนใหญ่ของเรา และคณะทำงาน CSS กำลังดำเนินการกับข้อกำหนดระดับ 2 อยู่แล้ว ในบทความนี้ ผมจะอธิบายสิ่งที่เป็นส่วนหนึ่งของ Working and Editor's Draft ของข้อมูลจำเพาะนั้นในปัจจุบัน โปรดทราบว่าทุกอย่างที่นี่อาจมีการเปลี่ยนแปลง และปัจจุบันไม่สามารถใช้งานในเบราว์เซอร์ได้ ลองพิจารณากระบวนการนี้ดู ฉันแน่ใจว่าฉันจะเขียนส่วนที่ใช้งานได้จริงมากขึ้นเมื่อเราเริ่มเห็นว่าการนำไปปฏิบัติเป็นรูปเป็นร่างขึ้น

ระดับข้อมูลจำเพาะ CSS

ฟีเจอร์ CSS Grid ที่เราสามารถใช้ได้ในปัจจุบันคือฟีเจอร์จากระดับ 1 ของข้อกำหนด CSS Grid ส่วนต่างๆ ของ CSS แบ่งออกเป็นโมดูล การแยกส่วนนี้เกิดขึ้นเมื่อ CSS ย้ายจาก CSS 2.1 ซึ่งเป็นสาเหตุที่บางครั้งคุณได้ยินคนพูดถึง CSS3 ในความเป็นจริง ไม่มี CSS3 แต่มีชุดโมดูลที่รวมทุกสิ่งที่เป็นส่วนหนึ่งของข้อกำหนด CSS2.1 แล้ว CSS ใดๆ ที่มีอยู่ใน CSS2.1 กลายเป็นส่วนหนึ่งของโมดูลระดับ 3 ดังนั้นเราจึงมีตัวเลือก CSS ระดับ 3 เนื่องจากมีตัวเลือกใน CSS2.1

ฟีเจอร์ CSS ใหม่ซึ่งไม่ได้เป็นส่วนหนึ่งของ CSS2.1 เช่น CSS Grid Layout เริ่มต้นที่ระดับ 1 ข้อมูลจำเพาะ CSS Grid ระดับ 1 เป็นเวอร์ชันแรกของ Grid เมื่อระดับข้อมูลจำเพาะถึงสถานะการแนะนำผู้สมัครแล้ว ฟีเจอร์ใหม่ที่สำคัญจะไม่ถูกเพิ่ม ซึ่งหมายความว่าเบราว์เซอร์และตัวแทนผู้ใช้อื่นๆ สามารถใช้ข้อกำหนดนี้และกลายเป็นคำแนะนำของ W3C ได้ หากมีการออกแบบคุณลักษณะใหม่ สิ่งเหล่านี้จะเกิดขึ้นในระดับใหม่ของข้อกำหนด เรามาถึงจุดนี้ด้วย CSS Grid Layout ข้อกำหนดระดับ 1 อยู่ที่ CR และมีการสร้างข้อกำหนดระดับ 2 เพื่อให้คุณลักษณะใหม่ทำงานได้ ฉันขอแนะนำให้ดูที่ Editor's Draft หากคุณต้องการติดตามพร้อมกับการอภิปรายเกี่ยวกับข้อกำหนด เนื่องจากจะมีการแก้ไขล่าสุดทั้งหมด

ระดับ 2 ของ CSS Grid จะมีอะไรบ้าง?

ในท้ายที่สุด ข้อมูลจำเพาะระดับ 2 จะมีทุกอย่างที่อยู่ในระดับ 1 แล้ว บวกกับคุณสมบัติใหม่บางอย่าง หากคุณดูข้อมูลจำเพาะในขณะที่เขียน มีข้อความอธิบายว่าระดับ 1 ทั้งหมดควรถูกคัดลอกซ้ำเมื่อระดับ 2 ถึง CR

จากนั้นเราสามารถคาดหวังที่จะพบคุณลักษณะใหม่ ๆ และระดับ 2 ของข้อกำหนดกริดคือทั้งหมดที่เกี่ยวกับการทำงานคุณลักษณะ sub- grid ของ CSS Grid คุณลักษณะนี้ถูกตัดออกจากข้อกำหนดระดับ 1 เพื่อให้มีเวลาทำความเข้าใจกรณีการใช้งานสำหรับตารางย่อยได้อย่างถูกต้อง และให้เวลามากขึ้นในการทำงานกับคุณลักษณะนี้โดยไม่ต้องพักระดับ 1 ที่เหลือ ในส่วนที่เหลือของบทความนี้ ฉันจะ กำลังดูคุณลักษณะ sub-grid ตามที่ได้อธิบายไว้ในฉบับร่างของบรรณาธิการ เราอยู่ในขั้นเริ่มต้นของคุณลักษณะนี้ อย่างไรก็ตาม นี่เป็นเวลาที่เหมาะสมที่จะปฏิบัติตาม และเพื่อช่วยกำหนดรูปแบบการพัฒนาข้อกำหนด เป้าหมายของฉันในการเขียนบทความนี้คือการอธิบายบางสิ่งที่กำลังสนทนาอยู่ เพื่อให้คุณเข้าใจและนำความคิดเห็นของคุณมาสู่การอภิปราย

Subgrid คืออะไร?

เมื่อใช้ CSS Grid Layout คุณสามารถซ้อนกริดได้แล้ว ในตัวอย่างด้านล่าง ฉันมีตารางหลักที่มีแทร็กหกคอลัมน์และแทร็กสามแถว ฉันได้วางตำแหน่งรายการบนกริดนี้จากคอลัมน์บรรทัดที่ 2 ถึงบรรทัดที่ 6 และจากแถวที่ 1 ถึง 3 จากนั้น ฉันได้ทำให้รายการนั้นเป็นคอนเทนเนอร์กริดและกำหนดแทร็กของคอลัมน์

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: 2fr 1fr 2fr 1fr; }

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

สำหรับคอลัมน์ มักจะเป็นไปได้ที่จะหลีกเลี่ยงสถานการณ์ข้างต้น โดยการจำกัดความยืดหยุ่นของกริดเป็นหลัก คุณสามารถสร้างคอลัมน์หน่วย fr minmax(0,1fr) เพื่อให้ไม่สนใจขนาดรายการเมื่อทำการกระจายพื้นที่หรือคุณสามารถกลับไปใช้เปอร์เซ็นต์ได้ อย่างไรก็ตาม การทำเช่นนี้จะขจัดประโยชน์บางประการของการใช้กริด และเมื่อต้องเรียงแถวในกริดที่ซ้อนกัน วิธีการเหล่านี้จะใช้งานไม่ได้

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

 .cards { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } .card { display: grid; grid-template-rows: auto 1fr auto; }

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

การสร้าง Subgrid

ตอนนี้เราสามารถดูว่ามีการระบุคุณลักษณะ sub-grid อย่างไรและจะแก้ปัญหาที่ฉันแสดงไว้ด้านบนได้อย่างไร

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

ในการสร้าง sub-grid เราจะมีค่าใหม่สำหรับ grid-template-rows และ grid-template-columns คุณสมบัติเหล่านี้มักใช้กับรายการแทร็ก ซึ่งกำหนดจำนวนและขนาดของแทร็กแถวและคอลัมน์ เมื่อสร้าง sub-grid คุณไม่ต้องการระบุแทร็กเหล่านี้ แต่คุณใช้ค่า subgrid grid เพื่อบอกกริดว่ากริดที่ซ้อนอยู่นี้ควรใช้จำนวนของแทร็กและขนาดแทร็กที่พื้นที่กริดที่ครอบคลุมครอบคลุม

ในโค้ดด้านล่าง ฉันมีตารางหลักที่มีแทร็ก 6 คอลัมน์และแทร็ก 3 แถว ตารางที่ซ้อนกันเป็นรายการกริดบนกริดหลักนั้นและขยายจากคอลัมน์บรรทัดที่ 2 ถึงบรรทัดของคอลัมน์ 6 และจากแถวที่ 1 ถึงบรรทัดที่ 4 นี่เป็นเพียงตัวอย่างแรกของเรา อย่างไรก็ตาม ตอนนี้เราสามารถดูได้โดยใช้ ตารางย่อย ตารางที่ซ้อนกันมีค่าของ subgrid -grid สำหรับทั้ง grid-template-columns และ grid-template-rows ซึ่งหมายความว่าขณะนี้กริดที่ซ้อนกันมีแทร็ก 4 คอลัมน์และแทร็ก 2 แถว โดยใช้ขนาดเดียวกันกับแทร็กที่กำหนดไว้ในพาเรนต์

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; }

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

Subgrids หนึ่งมิติ

คุณสามารถมี sub-grid ในมิติหนึ่งและระบุขนาดของแทร็คในอีกมิติหนึ่งได้ ในตัวอย่างนี้ sub-grid ถูกระบุใน grid-template-columns เท่านั้น คุณสมบัติ grid-template-rows มีรายการแทร็กที่ระบุ แทร็กของคอลัมน์จะยังคงเป็นแทร็กสี่แทร็กที่เราเห็นด้านบน แต่แทร็กของแถวสามารถกำหนดแยกไปยังแทร็กของพาเรนต์ได้

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; }

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

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

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-auto-rows: minmax(200px, auto); }

การกำหนดหมายเลขบรรทัดและ Subgrid

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

 .grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid; } .subitem { grid-column: 2 / 4; grid-row: 2; }

ช่องว่างและ Subgrids

ตารางย่อยจะสืบทอดช่องว่างของคอลัมน์หรือแถวที่ตั้งค่าไว้ในตารางหลัก อย่างไรก็ตาม ค่านี้สามารถลบล้างได้ด้วยช่องว่างของคอลัมน์และแถวที่ระบุในตารางย่อย ตัวอย่างเช่น หากกริดพาเรนต์มี column-gap ตั้งค่าเป็น 20px แต่กริดย่อยนั้นตั้งค่า column-gap เป็น 0 เซลล์กริดของกริดย่อยจะได้รับ 10px ในแต่ละด้านเพื่อลดช่องว่างเป็น 0 ด้วย เส้นกริดวิ่งลงไปตรงกลางช่องว่าง

ตอนนี้เราสามารถดูได้ว่า sub-grid จะช่วยเราแก้ปัญหากรณีการใช้งานที่สองตั้งแต่ต้นบทความนี้ได้อย่างไร การมีการ์ดที่มีส่วนหัวและส่วนท้ายที่เรียงตามการ์ด

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: auto 1fr auto; grid-gap: 20px; } .card { grid-row: auto / span 3; /* use three rows of the parent grid */ display: grid; grid-template-rows: subgrid; grid-gap: 0; /* set the gap to 0 on the subgrid so our cards don't have gaps */ }

ชื่อบรรทัดและ Subgrid

ชื่อบรรทัดใดๆ บนกริดหลักของคุณจะถูกส่งต่อไปยัง sub-grid ดังนั้น หากเราตั้งชื่อบรรทัดบนกริดหลัก เราสามารถจัดตำแหน่งรายการตามชื่อบรรทัดเหล่านั้นได้

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

คุณยังสามารถเพิ่มชื่อบรรทัดใน sub-grid ของคุณได้ บรรทัดกริดสามารถมีชื่อบรรทัดได้หลายชื่อ ดังนั้นชื่อเหล่านี้จะถูกเพิ่มลงในบรรทัด เมื่อต้องการระบุชื่อบรรทัด ให้เพิ่มรายการของชื่อเหล่านี้หลังค่า subgrid -grid ของ grid-template-columns และ grid-template-rows หากเราใช้ตัวอย่างข้างต้นและเพิ่มชื่อให้กับบรรทัดย่อย เราจะลงท้ายด้วยชื่อบรรทัดสองบรรทัดสำหรับบรรทัดใดๆ ใน sub-grid

 .grid { display: grid; grid-template-columns: [a] 1fr [b] 2fr [c] 1fr [d] 2fr [e] 1fr [f] 2fr [g]; grid-template-rows: auto auto auto; } .item { grid-column: 2 / 6; grid-row: 1 / 3; display: grid; grid-template-columns: subgrid [sub-a] [sub-b] [sub-c] [sub-d] [sub-e]; grid-template-rows: 10em 5em 200px 200px; } .subitem { grid-column: c / e; }

แทร็กโดยนัยและ Subgrid

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

ตามที่อธิบายไว้ข้างต้น อย่างไรก็ตาม คุณสามารถมีมิติข้อมูลย่อยของ sub-grid ในลักษณะเดียวกับตารางที่ซ้อนกันปกติ ซึ่งรวมถึงแทร็กโดยนัย

การมีส่วนร่วมกับกระบวนการ

งานของ CSS Working Group เกิดขึ้นในสาธารณะบน GitHub เช่นเดียวกับโครงการโอเพนซอร์สอื่นๆ ทำให้ง่ายต่อการติดตามผลงานว่าเป็นทุกอย่างที่เกิดขึ้นในรายชื่อผู้รับจดหมาย คุณสามารถดูปัญหาที่เกิดขึ้นกับระดับ 2 ของข้อกำหนด CSS Grid โดยการค้นหาปัญหาที่แท็กเป็น css-grid-2 ในที่เก็บ CSS Working Group GitHub หากคุณสามารถให้ความคิดเห็นหรือกรณีการใช้งานกับปัญหาเหล่านี้ได้ เรายินดีเป็นอย่างยิ่ง

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

ทั้งหมดนี้ใช้เวลานานเท่าใด?

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

ฉันหวังว่าทัวร์ครั้งนี้จะมีอะไรน่าสนใจในเร็วๆ นี้ ฉันตื่นเต้นที่คุณลักษณะ sub-grid กำลังดำเนินการอยู่ เนื่องจากฉันเชื่อเสมอมาว่ามันสำคัญสำหรับระบบเค้าโครงกริดแบบเต็มสำหรับเว็บ ดูพื้นที่นี้สำหรับข่าวเพิ่มเติมเกี่ยวกับความคืบหน้าของคุณลักษณะและการใช้งานเบราว์เซอร์ที่เกิดขึ้นใหม่