CSS Grid بمقابلہ Flexbox
اپنے CSS لے آؤٹس سے لڑنا بند کریں۔
میں Flexbox کے ذریعے خراب لے آؤٹس کو ٹھیک کرنے میں گھنٹوں ضائع کرتا تھا۔ میں چیزوں کو ایک قطار (row) میں لانے کی کوشش کرتا، لیکن آخری چیز پوری اسکرین پر پھیل جاتی تھی۔ یہ دیکھنے میں غلط لگتا تھا۔ میں نے margins اور دیگر طریقے آزمائے، لیکن کچھ بھی کام نہیں آیا۔
پھر میں نے اپنی سوچ بدل لی اور CSS Grid کا استعمال شروع کیا۔
فرق سادہ ہے:
- Flexbox ایک جہتی (one-dimensional) لے آؤٹس کے لیے ہے۔ اسے ایک قطار (row) یا ایک کالم (column) کے لیے استعمال کریں۔
- CSS Grid دو جہتی (two-dimensional) لے آؤٹس کے لیے ہے۔ اسے اس وقت استعمال کریں جب آپ کو ایک ہی وقت میں قطاروں (rows) اور کالموں (columns) دونوں کو کنٹرول کرنے کی ضرورت ہو۔
Flexbox کو چھوٹے کاموں کے لیے ایک ٹول سمجھیں۔ Grid کو اپنے پورے پیج کے ڈھانچے (structure) کے لیے ایک ٹول سمجھیں۔
Flexbox کا جال: جب آپ گیلری کے لیے Flexbox استعمال کرتے ہیں، تو چیزیں ہر اسکرین سائز پر مکمل طور پر درست ترتیب میں نہیں ہو پاتیں۔ اکثر آپ کے پاس ایسی "تنہا" (orphan) چیزیں رہ جاتی ہیں جو آپ کے ڈیزائن کے تسلسل کو خراب کر دیتی ہیں۔
Grid کا حل: Grid کے ساتھ، آپ کوڈ کی صرف ایک لائن سے رسپانسو (responsive) گیلریز بنا سکتے ہیں۔
یہ استعمال کریں: display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
یہ براؤزر کو بتاتا ہے کہ جتنے زیادہ ممکن ہو سکے 250px کے کالم فٹ کرے۔ براؤزر آپ کے لیے حساب کتاب خود کر لیتا ہے۔ اب اندازہ لگانے کی ضرورت نہیں، اور نہ ہی قطاریں خراب ہوں گی۔
ڈیش بورڈ کی مثال: سائیڈ بار، مین مواد (main content) اور فوٹر کے ساتھ ڈیش بورڈ بنانا Flexbox کے ساتھ مشکل ہے۔ فوٹر کو پوری چوڑائی پر پھیلانے کے لیے اکثر آپ کو نیسٹڈ کنٹینرز (nested containers) اور الجھے ہوئے کوڈ کی ضرورت پڑتی ہے۔
Grid کے ساتھ، آپ صرف ایک بار ٹریکس (tracks) متعین کرتے ہیں: grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto;
آپ ایک ہی کمانڈ کے ذریعے فوٹر کو پہلے کالم سے آخری کالم تک پھیلانے کا کہہ سکتے ہیں۔ آپ کا کوڈ صاف ستھرا اور پڑھنے میں آسان ہو جاتا ہے۔
میرا مشورہ:
• ہیڈرز یا بٹنز میں سادہ الائنمنٹ کے لیے Flexbox استعمال کریں۔ • مین پیج لے آؤٹس اور پیچیدہ گیلریز کے لیے Grid استعمال کریں۔ • صرف لے آؤٹ کے مسئلے کو حل کرنے کے لیے کنٹینرز کو نیسٹ (nest) کرنا بند کریں۔ • جگہ کو آسانی سے تقسیم کرنے کے لیے fr یونٹ کا استعمال کریں۔
اسے آج ہی آزمائیں۔ کوئی پرانا کمپوننٹ لیں جسے آپ نے Flexbox سے بنایا ہو۔ اسے CSS Grid کا استعمال کرتے ہوئے دوبارہ لکھیں۔ آپ دیکھیں گے کہ آپ کا کوڈ مختصر اور آپ کے لے آؤٹس زیادہ مضبوط ہو گئے ہیں۔