یہ مضمون Tailwind CSS میں قطار گرڈ پر بریک پوائنٹس اور میڈیا کے سوالات کو لاگو کرنے کے طریقہ کار کی مثال دے گا۔
ٹیل ونڈ میں رو گرڈ پر بریک پوائنٹس اور میڈیا سوالات کو کیسے لاگو کریں؟
Tailwind میں قطار گرڈ پر بریک پوائنٹس اور میڈیا کے سوالات کو لاگو کرنے کے لیے، ایک HTML پروگرام بنائیں۔ پھر، 'کا استعمال کرتے ہوئے مختلف اسکرین سائز کے لیے قطاروں کی تعداد کی وضاحت کریں۔ sm '،' md 'یا' ایل جی 'کے ساتھ بریک پوائنٹس' grid-rows-
آئیے عملی نفاذ کا جائزہ لیں:
مرحلہ 1: HTML پروگرام میں رو گرڈ کے ساتھ بریک پوائنٹس اور میڈیا سوالات کا استعمال کریں۔
ایک HTML پروگرام بنائیں اور مختلف اسکرین سائز کے لیے قطاروں کی تعداد کی وضاحت کریں ' grid-rows-
< جسم >
< div کلاس = 'grid grid-rows-2 md:grid-rows-3 lg:grid-rows-5 grid-flow-col gap-3 m-3 text-center' >
< div کلاس = 'bg-teal-500 p-5' > 1 < / div >
< div کلاس = 'bg-teal-500 p-5' > 2 < / div >
< div کلاس = 'bg-teal-500 p-5' > 3 < / div >
< div کلاس = 'bg-teal-500 p-5' > 4 < / div >
< div کلاس = 'bg-teal-500 p-5' > 5 < / div >
< div کلاس = 'bg-teal-500 p-5' > 6 < / div >
< div کلاس = 'bg-teal-500 p-5' > 7 < / div >
< div کلاس = 'bg-teal-500 p-5' > 8 < / div >
< div کلاس = 'bg-teal-500 p-5' > 9 < / div >
< div کلاس = 'bg-teal-500 p-5' > 10 < / div >
< / div >
< / جسم >
یہاں:
- ' گرڈ ” کلاس کو گرڈ لے آؤٹ بنانے کے لیے استعمال کیا جاتا ہے۔
- ' grid-rows-2 کلاس بتاتی ہے کہ گرڈ میں 2 برابر سائز کی قطاریں ہونی چاہئیں۔
- ' md:grid-rows-3 کلاس درمیانی اسکرین کے سائز پر گرڈ کو 3 برابر سائز کی قطاروں میں تبدیل کرتی ہے۔
- ' lg:grid-rows-5 کلاس بڑی سکرین کے سائز پر گرڈ کو 5 برابر سائز کی قطاروں میں تبدیل کرتی ہے۔
- ' grid-flow-col ” کلاس گرڈ آئٹمز کو کالموں میں افقی طور پر رکھتا ہے۔
- ' gap-3 کلاس ہر گرڈ آئٹم کے درمیان 3 اکائیوں کا فاصلہ طے کرتی ہے۔
- ' m-3 ” کلاس گرڈ کنٹینر کے ارد گرد 3 اکائیوں کے مارجن کا اطلاق کرتی ہے۔
- ' متن کا مرکز کلاس ہر گرڈ آئٹم کے متن کو مرکز میں سیٹ کرتی ہے۔
- ' bg-teal-500 ” کلاس گرڈ آئٹمز کے پس منظر میں ٹیل کا رنگ سیٹ کرتی ہے۔
- ' p-5 کلاس بچے کے اندر موجود مواد میں 5 یونٹوں کی پیڈنگ کا اضافہ کرتی ہے۔
اشیاء.
مرحلہ 2: آؤٹ پٹ کی تصدیق کریں۔
اس بات کو یقینی بنانے کے لیے کہ بریک پوائنٹس اور میڈیا کے سوالات قطار گرڈ پر لاگو کیے گئے ہیں، اسکرین کا سائز تبدیل کرکے HTML ویب صفحہ دیکھیں:
مندرجہ بالا آؤٹ پٹ میں، یہ دیکھا جا سکتا ہے کہ قطاروں کی تعداد اسکرین کے سائز کے ساتھ تبدیل ہوتی ہے. اس سے ظاہر ہوتا ہے کہ بریک پوائنٹس اور میڈیا کے سوالات کو قطار گرڈ پر کامیابی سے لاگو کیا گیا ہے۔
نتیجہ
ٹیل ونڈ میں قطار گرڈ پر بریک پوائنٹس اور میڈیا کے سوالات کو لاگو کرنے کے لیے، 'کا استعمال کرتے ہوئے مختلف اسکرین سائز کے لیے قطاروں کی تعداد کی وضاحت کریں۔ sm '،' md 'یا' ایل جی 'کے ساتھ بریک پوائنٹس' grid-rows-
'افادیت. پھر، اسکرین کا سائز تبدیل کرکے ویب صفحہ پر تبدیلیوں کو یقینی بنائیں۔ اس مضمون نے Tailwind CSS میں قطار گرڈ پر بریک پوائنٹس اور میڈیا کے سوالات کو لاگو کرنے کے طریقہ کار کی مثال دی ہے۔