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