กริดโดยนัย รูปแบบเค้าโครงที่ทำซ้ำได้ และอันตราย

Dave Rupert กับ CSS magic ที่ทันสมัย ที่จัดการกับหนึ่งในปริศนาคลาสสิกเหล่านั้น: จะเกิดอะไรขึ้นเมื่อ CSS สำหรับส่วนประกอบไม่สามารถจัดการกับเนื้อหาที่เรานำเสนอได้

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

เขาเอื้อมมือไปเพื่อ :has() เพื่อเขียนตัวเลือกที่ดีที่จะดมกลิ่นรายการสุดท้ายในตารางที่มีรายการจำนวนคี่:

.items:has(.item:last-of-type:nth-of-type(odd)) .item:first-of-type { }

ทำลายมันลง:

• เรามีคอนเทนเนอร์แม่ของ .items.
• ถ้าภาชนะ :has() an .item เด็กที่เป็นประเภทสุดท้าย
• …และนั่น .item เกิดขึ้นเป็นกรณีที่มีเลขคี่
• …จากนั้นเลือกอันแรก .item องค์ประกอบประเภทนั้นและสไตล์มัน!

ในกรณีนี้ อันสุดท้าย .item สามารถตั้งค่าให้เต็มความกว้างเพื่อป้องกันรูในเลย์เอาต์

ถ้า… แล้ว… CSS มีพลังตรรกะแบบมีเงื่อนไข! เรากำลังพูดถึงการรองรับ Safari TP และ Edge/Chrome Canary เท่านั้น แต่นั่นก็ยอดเยี่ยมมาก

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

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