چند سال پہلے، میں ایک ڈیش بورڈ بنانے بیٹھا۔ کچھ خاص نہیں—بس ایک فکسڈ سائیڈ بار، ایک مین کنٹینٹ ایریا، اور ایک فوٹر۔

کچھ سال پہلے، میں نے ایک ڈیش بورڈ بنانے کا فیصلہ کیا۔ کچھ خاص نہیں—بس ایک فکسڈ سائیڈ بار، ایک مین کنٹینٹ ایریا، اور ایک فوٹر۔ Flexbox ایک واضح انتخاب محسوس ہوا، اور شروع میں، اس نے صحیح کام بھی کیا۔ پھر میں نے مین سیکشن میں کارڈز کی ایک قطار ڈالی۔ پورا لے آؤٹ بگڑ گیا۔ میں نے اگلے تین گھنٹے flex-grow کے تناسب اور نیسٹڈ فیصد چوڑائیوں (nested percentage widths) کے ساتھ لڑتے ہوئے گزارے، اور یہ دیکھتے ہوئے کہ کنٹینرز کتنی ہی پیڈنگ کم کیوں نہ کر لی جائے، لائن میں آنے سے انکار کر رہے ہیں۔ ایسا محسوس ہو رہا تھا جیسے کوئی مینار گرنے والا ہو۔

اس تلخ تجربے نے مجھے جدید CSS لے آؤٹ کے بارے میں سب سے اہم بات سکھائی: Flexbox اور Grid حریف نہیں ہیں۔ وہ مختلف کاموں کے لیے اوزار ہیں، اور زیادہ تر ناکام لے آؤٹس غلط اوزار کے انتخاب کی وجہ سے ہوتے ہیں۔

فرق جہتی ہے

Flexbox کو ایک راہداری (hallway) کے طور پر سوچیں۔ اشیاء ایک ہی سمت میں بہتی ہیں، یا تو ایک قطار (row) کے طور پر یا ایک کالم (column) کے طور پر۔ یہ ایک جہتی (one-dimensional) تقسیم کے لیے بنایا گیا ہے۔ براؤزر مواد کو دیکھتا ہے، پھر فیصلہ کرتا ہے کہ اسے اس واحد محور (axis) پر کیسے پھیلانا، سکیڑنا یا ترتیب دینا ہے۔ یہ Flexbox کو ایسی صورتحال کے لیے بہترین بناتا ہے جہاں مواد لے آؤٹ کا تعین کرتا ہے۔ ایک نیویگیشن بار، فارم فیلڈز کا ایک ڈھیر، یا ٹیگز کا ایک سیٹ جنہیں برابر فاصلے کی ضرورت ہو، سب ایک فلیکس کنٹینر میں قدرتی طور پر فٹ ہو جاتے ہیں کیونکہ وہ منطق کی ایک ہی لائن پر ہوتے ہیں۔

دوسری طرف، Grid ایک فلور پلان ہے۔ یہ سختی سے دو جہتی (two-dimensional) ہے، جو ایک ہی وقت میں قطاروں اور کالموں کو سنبھالتا ہے۔ آپ پہلے ڈھانچہ (structure) متعین کرتے ہیں، پھر اس کے اندر اشیاء رکھتے ہیں۔ یہ Grid کو مجموعی پیج آرکیٹیکچر کے لیے مثالی بناتا ہے—جہاں بھی آپ کو عمودی (vertical) اور افقی (horizontal) پوزیشننگ کو ایک ساتھ کنٹرول کرنے کی ضرورت ہو۔ جب آپ نیسٹڈ Flexbox کنٹینرز کے ذریعے ایک پیچیدہ دو جہتی ڈیزائن کو زبردستی نافذ کرنے کی کوشش کرتے ہیں، تو آپ کا نتیجہ گہرا مارک اپ، کمزور ریپرز (wrappers)، اور نازک حساب کتاب کی صورت میں نکلتا ہے جو ایک اضافی عنصر شامل کرتے ہی بکھر جاتا ہے۔

Flexbox اب بھی اپنی اہمیت برقرار رکھے ہوئے ہے

ہر فلیکس کنٹینر کو Grid سے بدلنے کی جلدی نہ کریں۔ انفرادی اجزاء (components) کے اندر، Flexbox اکثر زیادہ صاف ستھرا اور سادہ ہوتا ہے۔ اگر آپ کے پاس دو بٹنوں والا کارڈ فوٹر ہے اور آپ ایک کو بائیں اور ایک کو دائیں طرف ترتیب دینا چاہتے ہیں، تو justify-content: space-between بالکل وہی کرتا ہے جو آپ چاہتے ہیں۔ اگر آپ کو نامعلوم اونچائی والے بٹن کے اندر کسی آئیکن کو عمودی طور پر مرکز (center) کرنے کی ضرورت ہے، تو align-items: center سب سے آسان راستہ ہے۔ متغیر مواد (variable content)—جیسے مختلف ناموں کی لمبائی والے یوزر بیجز کی ایک قطار—Flexbox کے اندر آسانی سے فٹ ہو جاتا ہے کیونکہ یہ مواد پر مبنی (content-first) ہے۔ کنٹینر اس چیز کے مطابق ڈھل جاتا ہے جو اس کے اندر موجود ہو۔

Grid کنٹینر پر مبنی (container-first) ہے۔ آپ براؤزر کو بتاتے ہیں کہ کتنے ٹریکس (tracks) موجود ہیں اور وہ کتنے بڑے ہونے چاہئیں، پھر آپ ان سیلز میں اشیاء ڈال دیتے ہیں۔ اگر آپ کا لے آؤٹ واقعی صرف ایک ہی لائن میں موجود اشیاء ہے جو جگہ بانٹ رہی ہیں، تو Grid غیر ضروری پیچیدگی پیدا کرتا ہے۔

پیج لے آؤٹ کا تعلق Grid سے ہے

یہ وہ جگہ ہے جہاں Grid کام سنبھال لیتا ہے۔ میرا ڈیش بورڈ والا ڈراونا خواب یاد ہے؟ یہاں وہ طریقہ ہے کہ ڈھانچہ شروع سے کیسا ہونا چاہیے تھا:

.page {
  display: grid;
  min-height: 100vh;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr;
}

.header { grid-row: 1; grid-column: 1 / -1; }
.sidebar { grid-row: 2; grid-column: 1; }
.main { grid-row: 2; grid-column: 2; }
.footer { grid-row: 3; grid-column: 1 / -1; }

دیکھیں کہ کیا ہو رہا ہے۔ .page کنٹینر تین قطاریں اور دو کالم قائم کرتا ہے۔ پہلی قطار auto کی بدولت خود کو اس کے مطابق ڈھال لیتی ہے جو بھی ہیڈر میں موجود ہو۔ درمیانی قطار 1fr کے ساتھ تمام دستیاب بچی ہوئی جگہ لے لیتی ہے۔ فوٹر آخری قطار میں آتا ہے، جو اپنے مواد کے مطابق سائز رکھتا ہے۔ اس دوران، سائیڈ بار 200 پکسل چوڑائی پر لاک ہو جاتا ہے، اور مین ایریا باقی جگہ بھر لیتا ہے۔

پلیسمنٹ کی منطق اصل سکون فراہم کرتی ہے۔ ہیڈر کالم لائن 1 سے لائن -1 تک پھیلا ہوا ہے، جس کا مطلب ہے کہ یہ دونوں کالموں پر پھیل جائے گا، قطع نظر اس کے کہ آپ بعد میں کتنے کالم شامل کرتے ہیں۔ سائیڈ بار اور مین کنٹینٹ قطار 2 کو شیئر کرتے ہیں لیکن الگ الگ کالموں میں ہوتے ہیں۔ فوٹر قطار 3 میں مکمل چوڑائی پر واپس آ جاتا ہے۔ آپ کو بچوں (children) پر فیصد کے حساب کتاب کی ضرورت نہیں ہے۔ آپ کو اونچائی کے لیے لڑتے ہوئے نیسٹڈ ریپرز کی ضرورت نہیں ہے۔ ایک جگہ سائیڈ بار کی چوڑائی تبدیل کریں، اور مین ایریا خود بخود ایڈجسٹ ہو جائے گا۔ پورا لے آؤٹ ایک مربوط نظام کے طور پر کام کرتا ہے۔

grid-template-areas کے ساتھ پڑھنے میں آسانی

مزید وضاحت کے لیے، آپ اپنے سیکشنز کو نام دے سکتے ہیں۔ لائن نمبروں کو مینیج کرنے کے بجائے، آپ ایک بصری نقشہ (visual map) لکھتے ہیں:

.page {
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header { grid-area: header; }
.main { grid-area: main; }

اب آپ کی اسٹائل شیٹ ایک وائر فریم کی طرح پڑھی جاتی ہے۔ اگر آپ کبھی کسی دوسرے بریک پوائنٹ کے لیے سائیڈ بار کو دائیں طرف دکھانا چاہتے ہیں، تو آپ ٹیمپلیٹ اسٹرنگ میں صرف دو الفاظ بدل دیتے ہیں۔ اس طرح کی ساختیاتی پڑھنے کی صلاحیت (structural readability) نیسٹڈ فلیکس کنٹینرز کے ڈھیر کے اندر حاصل کرنا ناممکن ہے۔

دو کٹھن اسباق

Grid کوئی جادو نہیں ہے۔ دو ایسی غلطیاں ہیں جو آپ کے لے آؤٹ کو تیزی سے تباہ کر دیں گی۔

پہلا مسئلہ یونٹس کا لاپرواہ استعمال ہے۔ اگر آپ grid-template-columns: 1fr 1fr 1fr متعین کرتے ہیں لیکن آپ کے ڈیزائن کو صرف مواد کے دو کالموں کی ضرورت ہے، تو وہ تیسرا ٹریک پھر بھی موجود رہے گا۔ یہ یا تو خالی رہے گا اور ایک ایسا وقفہ پیدا کرے گا جس کی آپ کو توقع نہیں تھی، یا یہ آپ کے اصل مواد کو اس طرح سمٹنے پر مجبور کرے گا جس سے آپ کا ڈیزائن بگڑ جائے گا۔ سوچ سمجھ کر کام کریں۔ جب آپ کا مطلب دو کالم ہوں، تو repeat(2, 1fr) لکھیں۔