مضمر گرڈز، دہرائے جانے والے لے آؤٹ پیٹرنز، اور ڈینگلر

کچھ جدید CSS جادو کے ساتھ ڈیو روپرٹ جو ان کلاسک کنڈرموں میں سے ایک سے نمٹتا ہے: کیا ہوتا ہے جب جزو کے لیے سی ایس ایس اس مواد کو سنبھالنے سے قاصر ہو جسے ہم اس پر پھینک دیتے ہیں؟

مخصوص صورت حال یہ ہے جب ایک لے آؤٹ گرڈ اشیاء کی یکساں تعداد کی توقع کرتا ہے، لیکن اس کی بجائے طاق نمبر کے ساتھ فراہم کیا جاتا ہے۔ ہمارے پاس آخر میں ایک "لٹکتا ہوا" عنصر رہ گیا ہے جو لے آؤٹ کو پھینک دیتا ہے۔ ایسا لگتا ہے کہ کچھ کی ضرورت ہے۔ دفاعی سی ایس ایس اور ڈیو نے اسے پورا کیا۔

وہ پہنچتا ہے۔ :has() ایک نفٹی سلیکٹر لکھنے کے لیے جو ایک گرڈ میں آخری آئٹم کو سونگھتا ہے جس میں آئٹمز کی عجیب تعداد ہوتی ہے:

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

اس کو توڑنا:

• ہمارے پاس پیرنٹ کنٹینر ہے۔ .items.
• اگر کنٹینر :has() an .item بچہ جو اپنی قسم کا آخری ہے،
• …اور یہ کہ .item ایک طاق نمبر والی مثال ہوتی ہے،
• …پھر پہلے کو منتخب کریں۔ .item اس قسم کا عنصر اور اس کا انداز!

اس صورت میں، یہ آخری .item لے آؤٹ میں سوراخوں کو روکنے کے لیے پوری چوڑائی پر جانے کے لیے سیٹ کیا جا سکتا ہے۔

اگر… پھر… سی ایس ایس کے پاس مشروط منطق کی طاقتیں ہیں! ہم اس وقت صرف Safari TP اور Edge/Chrome Canary کے لیے سپورٹ کے بارے میں بات کر رہے ہیں، لیکن یہ بہت زبردست ہے۔

جیسا کہ موقع ملتا ہے، تیمانی عفیف نے حال ہی میں وہ چالیں شیئر کیں جو اس نے سیکھی تھیں۔ مضمر گرڈ کے ساتھ تجربہ کرنا. CSS گرڈ کے آٹو پلیسمنٹ الگورتھم سے فائدہ اٹھاتے ہوئے، ہمیں کسی گرڈ کے لیے کالموں اور قطاروں کی ایک مقررہ تعداد کا واضح طور پر اعلان کرنے کی بھی ضرورت نہیں ہے — اگر ضرورت ہو تو CSS انہیں ہمارے لیے بنائے گا!

نہیں، ٹیمانی کی تکنیک ڈیو کے "ڈینگلر" مخمصے کا متبادل حل نہیں ہیں۔ لیکن ڈیو کے دفاعی سی ایس ایس کے استعمال کے ساتھ دوبارہ قابل گرڈ لے آؤٹ پیٹرن کے لیے تیمانی کے نقطہ نظر کو جوڑنا :has()، ہمیں ایک بہت ہی طاقتور اور پیچیدہ نظر آنے والا گرڈ ملتا ہے جو ہلکا پھلکا ہے اور متوازن، دوبارہ قابل پیٹرن کو برقرار رکھتے ہوئے کسی بھی قسم کی اشیاء کو سنبھالنے کے قابل ہے۔