ٹیل ونڈ سی ایس ایس میں، قطار کا دورانیہ ایک عنصر کو گرڈ کے اندر دو یا زیادہ قطاروں پر قابض بناتا ہے۔ اس کا استعمال قطاروں کی تعداد کی وضاحت کرنے کے لیے کیا جاتا ہے جس میں ایک عنصر کا قبضہ ہونا چاہیے۔ یہ صارفین کو متعدد قطاروں میں گرڈ آئٹم کے سائز اور پوزیشن کو ایڈجسٹ کرنے اور مختلف لے آؤٹ بنانے کی اجازت دیتا ہے۔ مزید یہ کہ، یہ ویب صفحات کے لیے لچکدار اور ذمہ دار گرڈ لے آؤٹ بنانے کے لیے استعمال کیا جا سکتا ہے۔
یہ تحریر ٹیل ونڈ سی ایس ایس میں قطاروں کو پھیلانے کے طریقہ کار کی مثال دے گی۔
ٹیل ونڈ میں قطاروں کا اسپین کیسے بنایا جائے؟
ٹیل ونڈ میں قطاروں کو پھیلانے کے لیے، ایک HTML پروگرام بنائیں۔ پھر، استعمال کریں ' row-span-
عملی نفاذ کے لیے، فراہم کردہ اقدامات کو دیکھیں:
مرحلہ 1: HTML پروگرام میں کالم اسپین بنائیں
ایک HTML پروگرام بنائیں اور استعمال کریں ' row-span-
< جسم >
< div کلاس = 'گرڈ گرڈ قطاریں-4 گرڈ فلو-کول گیپ-3 ایم-3 ٹیکسٹ سینٹر' >
< div کلاس = 'row-span-3 bg-teal-500 p-5' > 1 < / div >
< div کلاس = 'bg-teal-500 p-5' > 2 < / div >
< div کلاس = 'row-span-2 bg-teal-500 p-5' > 3 < / div >
< div کلاس = 'bg-teal-500 p-5' > 4 < / div >
< div کلاس = 'bg-teal-500 p-5' > 5 < / div >
< div کلاس = 'row-span-4 bg-teal-500 p-5' > 6 < / div >
< / div >
< / جسم >
یہاں، پیرنٹ
- ' گرڈ ” کلاس کو گرڈ لے آؤٹ بنانے کے لیے استعمال کیا جاتا ہے۔
- ' grid-row-4 کلاس گرڈ میں قطاروں کی تعداد کو 4 پر سیٹ کرتی ہے۔
- ' grid-flow-col ” کلاس گرڈ آئٹمز کو کالموں میں افقی طور پر رکھتا ہے۔
- ' gap-3 کلاس ہر گرڈ آئٹم کے درمیان 3 اکائیوں کا فاصلہ طے کرتی ہے۔
- ' m-3 ” کلاس گرڈ کنٹینر کے ارد گرد 3 اکائیوں کے مارجن کا اطلاق کرتی ہے۔
- ' متن کا مرکز کلاس ہر گرڈ آئٹم کے متن کو مرکز میں سیٹ کرتی ہے۔
بچے میں
- ' row-span-3 کلاس بتاتی ہے کہ عنصر کو گرڈ میں 3 قطاروں میں پھیلانا چاہیے۔
- ' row-span-2 کلاس اشارہ کرتی ہے کہ عنصر کو گرڈ میں 2 قطاروں میں پھیلانا چاہیے۔
- ' row-span-4 کلاس بتاتی ہے کہ عنصر کو گرڈ میں 4 قطاروں میں پھیلانا چاہیے۔
- ' bg-teal-500 کلاس گرڈ آئٹم کے پس منظر میں ٹیل رنگ سیٹ کرتی ہے۔
- ' p-5 ” کلاس چائلڈ آئٹمز کے اندر موجود مواد میں 5 یونٹس کی پیڈنگ کا اضافہ کرتی ہے۔
مرحلہ 2: آؤٹ پٹ کی تصدیق کریں۔
HTML ویب صفحہ دیکھیں کہ آیا قطار کا دورانیہ لاگو ہوا ہے یا نہیں:
مندرجہ بالا آؤٹ پٹ میں، یہ دیکھا جا سکتا ہے کہ قطار کا دورانیہ کامیابی کے ساتھ لاگو کیا گیا ہے جس کے مطابق اس کی وضاحت کی گئی تھی۔
نتیجہ
ٹیل ونڈ میں قطاروں کو پھیلانے کے لیے، ' row-span-
HTML پروگرام میں افادیت اور قطاروں کی تعداد کی وضاحت کریں جو ہر عنصر کو پھیلانا چاہئے۔ تصدیق کے لیے، HTML ویب صفحہ پر تبدیلیاں دیکھیں۔ اس تحریر نے ٹیل ونڈ سی ایس ایس میں قطاروں کا دورانیہ بنانے کے طریقہ کار کی مثال دی ہے۔