CSS گرڈ آپ کو لچکدار طریقوں کی بدولت بنیادی اور جدید ویب سائٹ لے آؤٹ بنانے کے لیے، جو موبائل، ٹیبلیٹ اور ڈیسک ٹاپ ڈیوائسز پر بہت اچھے لگتے ہیں ٹولز فراہم کرتا ہے ۔

یہ ٹیوٹوریل ہر اس چیز پر بحث کرے گا جس کی آپ کو جاننے کی ضرورت ہے تاکہ آپ ایک پیشہ ور کی طرح CSS گرڈ استعمال کر سکیں۔

سی ایس ایس گرڈ کیا ہے؟ || What is CSS Grid

سی ایس ایس گرڈ لے آؤٹ ماڈیول سی ایس ایس میں ایک دو جہتی لے آؤٹ سسٹم ہے جو آپ کو ویب پر پیچیدہ اور لچکدار لے آؤٹ بنانے کی اجازت دیتا ہے۔یہ ایک طاقتور ٹول ہے جسے مختلف قسم کے لے آؤٹ بنانے کے لیے استعمال کیا جا سکتا ہے، بشمول:

1. ریسپانسیو لے آؤٹ جو اسکرین کے مختلف سائز کے مطابق ہوتے ہیں۔
2. معمار ی لے آؤٹ جو عناصر کو حیران کن انداز میں ترتیب دیتے ہیں۔
3. گرڈ لے آؤٹ جو کسی صفحہ کو کالموں اور قطاروں میں تقسیم کرتے ہیں۔
4. Flexbox لے آؤٹ جو عناصر کو دوبارہ سائز اور دوبارہ ترتیب دینے کی اجازت دیتے ہیں۔

کروم، فائر فاکس، سفاری، اور ایج سمیت تمام بڑے براؤزرز CSS گرڈ کو سپورٹ کرتے ہیں۔ یہ نسبتاً نئی ٹیکنالوجی ہے، لیکن یہ تیزی سے ویب پر لے آؤٹ بنانے کا ترجیحی طریقہ بنتا جا رہا ہے۔

سی ایس ایس گرڈ استعمال کرنے کے کچھ فوائد یہ ہیں:

1. یہ ایک دو جہتی ترتیب کا نظام ہے، جس کا مطلب ہے کہ آپ ایسی ترتیب بنا سکتے ہیں جس میں کالم اور قطار دونوں ہوں۔
2. یہ لچکدار اور جوابدہ ترتیبی نظام ہے، جس کا مطلب ہے کہ آپ کی ترتیب مختلف اسکرین سائز کے مطابق خود بخود بدل جائے گی۔
3. یہ طاقتور ہے اور اسے مختلف قسم کے لے آؤٹ بنانے کے لیے استعمال کیا جا سکتا ہے۔
4. تمام بڑے براؤزر اس کی حمایت کر رہے ہیں۔

اگر آپ ویب پر لے آؤٹ بنانے کے لیے ایک طاقتور اور لچکدار طریقہ تلاش کر رہے ہیں، تو CSS گرڈ ایک بہترین آپشن ہے۔

Grid Container vs. Grid Item

گرڈ کنٹینر بمقابلہ گرڈ آئٹم

Grid Container: گرڈ کنٹینر ایک HTML عنصر ہے جس کی ڈسپلے پراپرٹی کی ویلیو گرڈ اور ان لائن گرڈ ہوتی ہے۔
Grid Item: گرڈ آئٹم گرڈ کنٹینر کے براہ راست بچوں میں سے کوئی بھی ہو سکتی ہے۔

مندرجہ بالا ٹکڑا نے HTML دستاویز کے “section class=”grid-container عناصر کو باقاعدہ section نوڈز سے بلاک لیول گرڈ باکس ماڈلز میں تبدیل کرنے کے لیے گرڈ ویلیو کا استعمال کیا ہے۔

Practice Here

1. ڈسپلے: گرڈ (display: grid) ڈائریکٹیو صرف ایک کالم گرڈ کنٹینر بناتا ہے۔ لہذا، گرڈ آئٹمز عام ترتیب کے بہاؤ میں ظاہر ہوں گے (ایک آئٹم دوسرے کے نیچے)۔
2. نوڈ کو گرڈ باکس ماڈل میں تبدیل کرنے سے عنصر کے براہ راست بچے گرڈ آئٹمز بن جاتے ہیں۔
3. ڈسپلے: گرڈ (display: grid) صرف باکس ماڈل اور اس کے براہ راست بچوں کو متاثر کرتی ہے۔ یہ پوتے نوڈس کو متاثر نہیں کرتی ہے۔

آئیے اب ان لائن گرڈ (inline-grid)ویلیو پر بات کرتے ہیں۔

سی ایس ایس میں ان لائن گرڈ ویلیو کیا ہے؟

CSS میں ان لائن گرڈ ویلیو ایک گرڈ لے آؤٹ بنانے کے لیے استعمال کی جاتی ہے جو کہ ان لائن لیول ہو۔ اس کا مطلب یہ ہے کہ گرڈ آئٹمز کو بلاک کے بجائے ایک ہی لائن میں رکھا جائے گا۔ ان لائن گرڈ لے آؤٹ اکثر نیویگیشن مینوز اور سوشل میڈیا بٹن جیسی چیزوں کے لیے استعمال ہوتے ہیں۔
ان لائن گرڈ براؤزرز کو منتخب HTML عنصر کو ان لائن لیول گرڈ باکس ماڈل کے طور پر ظاہر کرنے کے لیے کہتا ہے۔
دوسرے الفاظ میں، کسی عنصر کی ڈسپلے پراپرٹی کی قدر کو ان لائن گرڈ پر سیٹ کرنا باکس ماڈل کو ان لائن لیول گرڈ لے آؤٹ ماڈیول میں بدل دیتا ہے۔
ان لائن گرڈ لے آؤٹ بنانے کے لیے، آپ کو پیرنٹ عنصر کی ڈسپلے پراپرٹی کو ان لائن گرڈ پر سیٹ کرنا ہوگا۔ اس کے بعد آپ گرڈ کے سائز کی وضاحت کے لیےgrid-template-columns اور grid-template-rows کی خصوصیات استعمال کر سکتے ہیں۔

Practice Here
HTML دستاویز کے <section > عناصر کو ریگولر <section > نوڈس سے ان لائن لیول گرڈ باکس ماڈلز میں تبدیل کرنے کے لیے اوپر کا ٹکڑا ان لائن گرڈ ویلیو کا استعمال کرتا ہے۔

گرڈ لے آؤٹ کی وضاحتی خصوصیات

ریگولر ایچ ٹی ایم ایل عنصر کو گرڈ (یا ان لائن گرڈ) باکس ماڈل میں تبدیل کرنے پر، گرڈ لے آؤٹ ماڈیول گرڈ باکس اور اس کے براہ راست بچوں کی پوزیشننگ کے لیے خصوصیات کی دو اقسام فراہم کرتا ہے:

• گرڈ کنٹینر کے لیے استعمال ہونے والی خصوصیات
• گرڈ کنٹینر آئٹمز کے لیے استعمال ہونے والی خصوصیات

گرڈ کنٹینر کی خصوصیات کیا ہیں؟

گرڈ کنٹینر کی خصوصیات بتاتی ہیں کہ براؤزر کو گرڈ باکس ماڈل کے اندر آئٹمز کو کس طرح ترتیب دینا چاہیے۔

نوٹ: ہم کنٹینر پر گرڈ کنٹینر کی خاصیت کی وضاحت کرتے ہیں، نہ کہ اس کے آئٹمز۔
گرڈ کنٹینر کی خصوصیات کی آٹھ (8) اقسام ہیں:

• grid-template-columns
• grid-template-rows
• grid-auto-columns
• grid-auto-rows
• justify-content
• justify-items
• align-content
• align-items

What Is CSS Grid’s grid-template-columns Property?

grid-template-columns کالموں کی تعداد اور چوڑائی کی وضاحت کرتا ہے جو براؤزر کو منتخب گرڈ کنٹینر میں دکھانا چاہیے۔

مثال 1: دو کالم گرڈ کنٹینر کیسے بنایا جائے۔

اوپر کا ٹکڑا گرڈ-ٹیمپلیٹ-کالموں کی خاصیت کو منتخب گرڈ کنٹینر میں مختلف چوڑائی کے دو کالم دکھانے کے لیے استعمال کرتا ہے۔
نوٹ: ہم نے گرڈ کنٹینر میں دستیاب جگہ کی کسر کے مقابلے میں دوسرے کالم کی چوڑائی کی پیمائش کرنے کے لیے fr (فرکشن) یونٹ کا استعمال کیا۔

Practice Here

مثال 2: تین کالموں والا گرڈ کنٹینر کیسے بنایا جائے۔

Practice Here

اوپر کا ٹکڑا گرڈ-ٹیمپلیٹ-کالموں کی خاصیت کو منتخب <section > گرڈ کنٹینر میں مختلف چوڑائی کے تین کالم دکھانے کے لیے استعمال کرتا ہے۔

1. آپ تمام گرڈ کنٹینر کے کالموں کے لیے ڈیفالٹ کالم کی چوڑائی بتانے کے لیے ‘grid-auto-columns’ پراپرٹی استعمال کر سکتے ہیں۔ مثال کے طور پر، grid-auto-colums: 150px تمام کالموں کے لیے 150px کی ڈیفالٹ چوڑائی سیٹ کرے گا۔ لیکن ایک ‘grid-template-colums’ پراپرٹی اسے اوور رائیڈ کر دے گی۔
2. واضح گرڈ کالم وہ کالم ہیں جنہیں آپ “grid-template-colums” خاصیت کے ساتھ واضح طور پر بیان کرتے ہیں۔
3. مضمر گرڈ کالم وہ کالم ہیں جو براؤزر خود بخود بناتے ہیں۔ ہم مضمر کالموں کے لیے ٹریک سائز بتانے کے لیے گرڈ آٹو کالم کی خصوصیات کا استعمال کرتے ہیں۔

ٹپ: بار بار پیٹرن کے ساتھ گرڈ-ٹیمپلیٹ-کالم کی قدروں کی وضاحت کرنے کے لیے () CSS repeatفنکشن کا استعمال کریں۔ ہم اس ٹیوٹوریل میں بعد میں ()repeat فنکشن پر بات کریں گے۔
گرڈ کالموں کے درمیان خلا پیدا کرنے کے لیے سی ایس ایس کیcolumn-gap پراپرٹی کا استعمال کریں۔

سی ایس ایس grid-template-rows پراپرٹی کیا ہے؟

grid-template-rows قطاروں کی تعداد اور اونچائیوں کی وضاحت کرتی ہے جو براؤزر کو منتخب گرڈ کنٹینر میں دکھانا چاہیے۔

مثال 1: تین قطار والا گرڈ کنٹینر کیسے بنایا جائے۔

Practice Here

اوپر کا ٹکڑا گرڈ-ٹیمپلیٹ-قطاروں کی خاصیت کو منتخب <section> گرڈ کنٹینر میں مختلف اونچائیوں کی تین قطاریں دکھانے کے لیے استعمال کرتا ہے۔
نوٹ: ہم نے گرڈ کنٹینر میں دستیاب جگہ کی کسر کی نسبت دوسری قطار کی پیمائش کرنے کے لیے fr (فرکشن) یونٹ کا استعمال کیا۔

مثال 2: تین قطاروں اور چار کالموں والا گرڈ کنٹینر کیسے بنایا جائے۔

Practice Here

مندرجہ بالا ٹکڑا نے grid-auto-rows کی خاصیت کو منتخب <section> گرڈ کنٹینر میں مختلف اونچائیوں کے تین کالم دکھانے کے لیے استعمال کیا ہے۔
نوٹ:

1. آپ تمام گرڈ کنٹینر کی قطاروں کے لیے ڈیفالٹ قطار کی اونچائیوں کی وضاحت کرنے کے لیgrid-auto-rows پراپرٹی استعمال کر سکتے ہیں۔ مثال کے طور پر، grid-auto-rows: 100px تمام قطاروں کے لیے 100px کی ڈیفالٹ اونچائیاں سیٹ کرے گا۔ لیکن grid-template-rows کا تعین اسے اوور رائیڈ کر دے گا۔
2. واضح گرڈ قطاریں وہ قطاریں ہیں جن کی وضاحت آپ grid-auto-rowsکی خاصیت کے ساتھ واضح طور پر کرتے ہیں۔
3. مضمر گرڈ قطاریں وہ قطاریں ہیں جو براؤزر خود بخود بناتے ہیں۔ ہم مضمر قطاروں کے لیے ٹریک سائز بتانے کے لیgrid-auto-rows کی خصوصیات استعمال کرتے ہیں۔

ٹپ:
بار بار پیٹرن کے ساتھgrid-auto-rowsکی قدروں کی وضاحت کرنے کے لیے سی ایس ایس ()repeatفنکشن کا استعمال کریں۔ ہم بعد میں اس ٹیوٹوریل میں ()repeatفنکشن پر بات کریں گے۔
گرڈ قطاروں کے درمیان خلا پیدا کرنے کے لیے سی ایس ایس row-gap پراپرٹی کا استعمال کریں۔

سی ایس ایس گرڈ justify-content پراپرٹی کیا ہے؟

justify-content یہ بتاتا ہے کہ براؤزر کو گرڈ کنٹینر کے کالموں کو اس کے قطار کے محور کے ساتھ کس طرح پوزیشن میں رکھنا چاہیے۔

1. قطار کے محور کو بعض اوقات ان لائن محور کہا جاتا ہے۔
2. justify-content کی خاصیت کام کرتی ہے اگر کالم کی کل چوڑائی گرڈ کنٹینر کی چوڑائی سے کم ہو۔ دوسرے لفظوں میں، آپ کو کنٹینر کے قطار کے محور کے ساتھ ساتھ اس کے کالموں کو بائیں یا دائیں درست کرنے کے لیے خالی جگہ کی ضرورت ہے۔

justify-content کی خاصیت درج ذیل اقدار کو قبول کرتی ہے

• start
• center
• end
• stretch
• space-between
• space-around
• space-evenly

آئیے ان اقدار پر بات کرتے ہیں۔

سی ایس ایس گرڈ میں justify-content: start کیا ہے؟

گرڈ کنٹینر کے کالموں کو اس کی قطار کے آغاز کے کنارے کے ساتھ شروع کرتی ہے۔

Practice Here

اوپر کا ٹکڑا <section> کے کالموں کو گرڈ کنٹینر کے کنارے کے شروع پر رکھنے کے لیے justify-content: start کا استعمال کرتا ہے۔