سی ایس ایس گرڈ کے ساتھ فیشن لچکدار ترتیب

Sep 11, 2025

کيسے

A woman sits at a laptop tweaking a CSS Grid layout

سی ایس ایس گرڈ قطاروں اور کالموں کے دو محور لے آؤٹ بنانے کے لئے بہترین ہے. نحو آسان ہے اور صفحہ لے آؤٹ ایک ہوا بنا دیتا ہے. لے آؤٹ جس میں ضرورت ہو گی ایک سے زیادہ نرس کنٹینرز اب بھی سی ایس ایس میں بیان کی جا سکتی ہیں.

گرڈ دوسرے ترتیب کی خصوصیات میں مختلف طریقے سے کام کرتا ہے، کیونکہ 'ڈسپلے' کی جائیداد کو 'گرڈ' کی قیمت کو لاگو کرنے کے بعد کسی بھی براہ راست بچوں کو متاثر کرے گا. یہ عناصر اب گرڈ اشیاء ہیں اور آپ والدین پر مقرر کردہ قواعد کے مطابق پوزیشن میں رکھے جائیں گے (جب تک خاص طور پر رکھے جانے تک).

گرڈ کے ساتھ گرفت میں جاؤ

گرڈ نئی خصوصیات کی ایک بڑی خصوصیات لاتا ہے:

گرڈ فرق

مارجنوں کا استعمال کرنے کے بجائے گرڈ کی اشیاء کے درمیان فرق کی وضاحت کرنے کے لئے گرڈ کی اپنی جائیداد ہے، کسی بھی فرق کی طرف سے تعریف اور غیر متاثرہ ہونے کے لئے گرڈ کی ترتیب کو فعال کرنے کے لئے اپنی اپنی جائیداد ہے. گرڈ سسٹم (جیسے انوٹ اور ٹویٹر بوٹسٹریپ میں پایا جاتا ہے) عام طور پر ہر چیز کو صحیح طریقے سے سیدھا کرنے کے لئے منفی مارجن کی ترتیب پر انحصار کرتا ہے.

فر یونٹ

حصہ کے لئے مختصر، پیمائش کی یہ نئی یونٹ اس جگہ کے بغیر یا اس کے بغیر ترتیب میں ترتیب کو تقسیم کرنے کے لئے استعمال کیا جاتا ہے.

گرڈ پلیٹ فارم

سی ایس ایس گرڈ کسی بھی عنصر کو کسی دوسرے چیزوں سے پہلے گرڈ پر کسی بھی عنصر کو ترجیح دی اور کسی بھی عنصر کی اجازت دیتا ہے، جو پھر خود کار طریقے سے پوزیشن میں رکھتا ہے.

گرڈ علاقوں اور ٹیمپلیٹس

گرڈ پر نامزد علاقوں کی وضاحت کی جاتی ہے، جس کے بعد تقریبا ASCII فیشن میں ترتیب کی وضاحت کرنے کا حوالہ دیا جا سکتا ہے.

Minmax ()

'Minmax ()' پراپرٹی کی قیمت آپ کو گرڈ اشیاء، کالم اور قطاروں کے لئے کم از کم اور زیادہ سے زیادہ سائز کو لاگو کرنے کے قابل بناتا ہے. یہ خصوصیت سی ایس ایس میں FlexBox اور ہر دوسرے ترتیب ماڈیول سے لاپتہ طور پر غائب ہے.

اپنے گرڈ کی تعمیر

سی ایس ایس گرڈ کے طاقتور علاقوں اور ٹیمپلیٹس آسانی سے حاصل کرنے کے لئے پیچیدہ ترتیب کو فعال کرتے ہیں. آپ 'گرڈ-علاقے' کی جائیداد کا استعمال کرتے ہوئے اپنے گرڈ کے اندر عناصر میں ایک نام کو لاگو کرکے شروع کرتے ہیں - مثال کے طور پر 'ہیڈر {گرڈ علاقے: ہیڈر؛ }. ایک بار جب آپ نے اپنے گرڈ میں تمام علاقوں کو نامزد کیا ہے تو آپ ترتیب کی وضاحت کرنے کے لئے 'گرڈ ٹیمپلیٹ-علاقوں' کی جائیداد کا استعمال کرسکتے ہیں.

 گرڈ ٹیمپلیٹ-علاقوں:
  "ہیڈر ہیڈر ہیڈر"
  "بائیں سائڈبار آرٹیکل دائیں سائڈبار"
  "فوٹر فوٹر فوٹر"
؛

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

پھر آپ کو نئے 'FR' یونٹ کا استعمال کرنے کے لئے استعمال کر سکتے ہیں کہ کس طرح مختلف کالموں میں چوڑائی تقسیم کی جاتی ہے:

 گرڈ ٹیمپلیٹ-کالم: 1fr 3fr 1fr؛

مندرجہ ذیل دکھایا گیا مثال دستیاب چوڑائی پانچ برابر چوڑائی اقدار میں تقسیم کرے گا؛ دوسرے الفاظ میں یہ پہلی کالم میں ایک پانچویں، دوسرا کالم اور حتمی کالم میں حتمی پانچویں تک ایک پانچویں لاگو ہوتا ہے.

قطاروں کا سائز سائز کرنے کے لئے آپ کو نئے 'مائنمیکس' کی جائیداد کی قیمت کو ان کے مواد میں سب سے اوپر اور نیچے کالموں کا سائز کرنے کے لئے استعمال کر سکتے ہیں اور پھر درمیانی قطار کو گرڈ میں باقی جگہوں سے دور کرنے کی اجازت دیتا ہے.

 گرڈ ٹیمپلیٹ-قطاریں:
  Minmax (مائن مواد، زیادہ سے زیادہ مواد)
  آٹو
Minmax (مائن مواد، زیادہ سے زیادہ مواد)؛

یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین ویب ڈیزائنر کے مسئلہ 271 میں شائع کیا گیا تھا. خریدنے مسئلہ 271. یا ویب ڈیزائنر کو سبسکرائب کریں .

اپنے سی ایس ایس گرڈ کی مہارت کو مضبوط کرنا چاہتے ہیں؟

Brenda Storer is giving her talk Using CSS Grid in the Real World at Generate New York from 25 - 27 April 2018 — برینڈا اسٹورر 25 - 27 اپریل 2018 سے نیویارک پیدا کرنے میں حقیقی دنیا میں سی ایس ایس گرڈ کا استعمال کرتے ہوئے اس کی بات کر رہا ہے

ایک سافٹ ویئر ڈویلپمنٹ ایجنسی میں ڈیزائنر اور سامنے کے آخر میں ڈویلپر کے طور پر، برینڈا اسٹورر مارچ 2017 میں براؤزرز کو اس کی ابتدائی رہائی کے بعد ویب سائٹس کے لئے سی ایس ایس گرڈ کا استعمال کر رہا ہے اور ایک بڑا پرستار ہے.

اس کی بات میں 25-27 اپریل 2018 تک نیویارک پیدا کریں Brenda قدم بہ قدم دکھائے گا کہ آپ کس طرح آپ کی ویب سائٹ کو سی ایس ایس گرڈ کے ساتھ بڑھا سکتے ہیں اور بڑے براؤزرز کے لئے ایک بلٹ پروف fallback لکھ سکتے ہیں (یا یہاں تک کہ آپ کے موجودہ گرڈ فریم ورک کے طور پر استعمال کرتے ہیں)، تمام خالص سی ایس ایس کے ساتھ: کوئی جاوا اسکرپٹ کی ضرورت ہے .

نیو یارک پیدا کریں 25-27 اپریل 2018 تک. اب اپنا ٹکٹ حاصل کرو .

متعلقہ مضامین:

سی ایس ایس گرڈ ترتیب راز سے پتہ چلتا ہے
سی ایس ایس گرڈ کے ساتھ ایک ذمہ دار ترتیب بنائیں
سی ایس ایس گرڈ کے ساتھ تیز رفتار حاصل کریں

سی ایس ایس گرڈ کے ساتھ فیشن لچکدار ترتیب

گرڈ کے ساتھ گرفت میں جاؤ

اپنے گرڈ کی تعمیر

اپنے سی ایس ایس گرڈ کی مہارت کو مضبوط کرنا چاہتے ہیں؟

کيسے - انتہائی مشہور مضامین

ایک بصری بلڈر میں ورڈپریس کو کس طرح تبدیل کرنا

ان تجاویز کے ساتھ گریفائٹ سے زیادہ حاصل کریں

فوٹوشاپ میں حقیقت پسندانہ لہروں کو کیسے پینٹ

فوٹوشاپ کے ساتھ 3D متحرک تصاویر میں تصاویر کو تبدیل کریں

رنگا رنگ دنیا کیسے بنائیں جو کہ کہانی بتائیں

آپ کی اب بھی زندگی کی پینٹنگ کی مہارت کو تیز کریں

گیم پلے ڈیزائن کے لئے ایک جہاز کا ماڈلنگ

درست ہڈیوں اور پٹھوں کو ڈرا

اقسام