لچکدار لے آؤٹ: تعمیر کے اصول اور انکولی سے فرق

لچکدار لے آؤٹ کیا ہے

لچکدار لے آؤٹ (liquid layout, fluid layout) — لے آؤٹ کا ایک نقطہ نظر جس میں عناصر کے سائز مقررہ پکسلز کے بجائے رشتہ دار اکائیوں میں متعین کیے جاتے ہیں۔ یہ صفحہ کو افقی اسکرولنگ کے بغیر براؤزر ونڈو کے ساتھ پھیلنے/سکڑنے کی اجازت دیتا ہے۔

لچکدار لے آؤٹ کا تصور مختلف ریزولوشن والے ڈیسک ٹاپ مانیٹر کے دور میں پیدا ہوا۔ 2000 کی دہائی میں، 960 پکسلز کی مقررہ چوڑائی والی سائٹیں 15 اور 30 انچ کے مانیٹر پر بری لگتی تھیں۔ لچکدار لے آؤٹ نے اس مسئلے کو حل کیا۔

Web Almanac (2024) کے مطابق، 78% جدید ویب سائٹیں رشتہ دار اکائیوں کے ذریعے لچکدار لے آؤٹ عناصر استعمال کرتی ہیں۔ خالص لچکدار لے آؤٹ کم عام ہیں — بنیادی طور پر ڈیش بورڈز اور کنٹرول پینلز میں۔

تاریخی سیاق و سباق

لچکدار لے آؤٹ 2000 میں John Allsopp کے مضمون “A Dao of Web Design” کی اشاعت کے بعد مقبول ہوا، جہاں انہوں نے رشتہ دار اکائیوں کے حق میں مقررہ پکسلز ترک کرنے کا مطالبہ کیا۔ اس منشور نے پورے ذمہ دار ڈیزائن کی فلسفیانہ بنیاد رکھی۔

رشتہ دار پیمائش کی اکائیاں: فیصد، vw، vh

CSS میں اہم رشتہ دار اکائیاں دو گروپوں میں تقسیم ہوتی ہیں: والد عنصر کے نسبت (فیصد) اور ویوپورٹ کے نسبت (vw، vh، vmin، vmax)۔ ہر گروپ لچکدار لے آؤٹ میں اپنے کام حل کرتا ہے۔

/* Percent — width relative to parent */
.sidebar {
    width: 30%;
}

.content {
    width: 70%;
}

/* vw/vh — viewport-based units */
.hero-section {
    width: 100vw;
    height: 80vh;
}

.fullscreen-modal {
    width: 90vmin;
}

فیصد والد کنٹینر کی چوڑائی کے نسبت شمار کیے جاتے ہیں۔ اندرونی فیصد آبشاری حسابات پیدا کر سکتے ہیں جو کبھی کبھی غیر متوقع نتائج دیتے ہیں۔ vw/vh اکائیاں ویوپورٹ سے منسلک ہوتی ہیں اور والد کنٹینرز کو نظر انداز کرتی ہیں — یہ فل اسکرین حصوں کے لیے آسان ہے۔

فونٹ کے لیے rem اکائی

لچکدار لے آؤٹ میں نہ صرف بلاکس کی چوڑائی رشتہ دار اکائیوں میں متعین کرنا ضروری ہے بلکہ فونٹ کا سائز بھی۔ rem اکائی (root em) متن کے سائز کو جڑ HTML عنصر سے جوڑتی ہے۔ html پر font-size تبدیل کرکے، آپ صفحہ پر تمام متن کو پھیلا/سکڑ سکتے ہیں۔

/* Global text scaling via rem */
html {
    font-size: 62.5%; /* 1rem = 10px */
}

.heading {
    font-size: 2.4rem; /* = 24px */
}

.body-text {
    font-size: 1.6rem; /* = 16px */
}

لچکدار بمقابلہ انکولی لے آؤٹ

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

لچکدار لے آؤٹ مسلسل پھیلاؤ/سکڑاؤ ہے، انکولی لے آؤٹ مقررہ لے آؤٹس کے درمیان سوئچنگ ہے۔ ہر نقطہ نظر کی اپنی طاقت اور کمزوریاں ہیں۔

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

CSS میں لچکدار لے آؤٹ کیسے لاگو کریں

بنیادی نفاذ میں تین اجزاء شامل ہیں: رشتہ دار چوڑائی کی اکائیاں، زیادہ سے زیادہ/کم سے کم حدود، اور جگہ کی تقسیم کے لیے flexbox یا grid۔

/* Fluid grid with Flexbox */
.container {
    display: flex;
    flex-wrap: wrap;
}

.card {
    flex: 1 1 30%;
    min-width: 250px;
}

/* Fluid grid with CSS Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Flexbox نقطہ نظر flex: 1 1 30% کے ساتھ کارڈ بناتا ہے جو کنٹینر کی چوڑائی کا تقریباً 30% لیتے ہیں لیکن 250px تک سکڑ سکتے ہیں۔ جب بہت سارے کارڈ ہوتے ہیں، تو وہ اگلی لائن پر چلے جاتے ہیں۔ Grid نقطہ نظر auto-fit اور minmax کے ساتھ خود بخود کالم بناتا ہے جو کنٹینر میں فٹ ہوتے ہیں۔

حدود: min-width اور max-width

خالص لچکدار لے آؤٹ کا اہم مسئلہ یہ ہے کہ بہت چوڑی اسکرینوں پر متن کی لائن 2000+ پکسلز تک پھیل جاتی ہے، جس سے پڑھنا ناممکن ہو جاتا ہے۔ CSS خصوصیات min-width اور max-width اسے حل کرتی ہیں۔

/* Container limits for readability */
.content-wrapper {
    width: 90%;
    max-width: 1200px;
    min-width: 320px;
    margin: 0 auto;
}

max-width: 1200px الٹرا وائیڈ مانیٹر پر مواد کو پھیلنے سے روکتا ہے۔ min-width: 320px چھوٹی اسکرینوں پر کنٹینر کی کم از کم چوڑائی کو یقینی بناتا ہے۔ width: 90% + max-width کا امتزاج ایک حد کے ساتھ لچکدار کنٹینر بناتا ہے — جدید ویب ڈیزائن میں سب سے مقبول پیٹرن۔

HTTP Archive (2025) کے مطابق، ٹاپ 1000 میں سے 92% سائٹیں مواد کے بلاکس کے لیے max-width استعمال کرتی ہیں۔ ڈیسک ٹاپ لے آؤٹ کے لیے معیاری قدر 1140–1200 پکسلز ہے۔

مخلوط نقطہ نظر: لچکدار + انکولی

جدید ویب ڈیزائن شاذ و نادر ہی خالص لچکدار یا انکولی نقطہ نظر استعمال کرتا ہے۔ مخلوط طریقہ دونوں کے فوائد کو یکجا کرتا ہے: رشتہ دار اکائیوں کے ساتھ لچکدار گرڈ + عالمی تنظیم نو کے لیے میڈیا سوالات۔

/* Hybrid: fluid base + media query */
.layout {
    display: grid;
    grid-template-columns: 1fr 3fr;
}

@media (max-width: 768px) {
    .layout {
        grid-template-columns: 1fr;
    }
}

ڈیسک ٹاپ پر، لے آؤٹ لچکدار کالم 1fr اور 3fr استعمال کرتا ہے — تناسب کسی بھی ونڈو چوڑائی پر برقرار رہتا ہے۔ موبائل پر، میڈیا سوال سنگل کالم اسکیم پر سوئچ کرتا ہے جہاں کالم عمودی طور پر اسٹیک ہوتے ہیں۔

مخلوط نقطہ نظر کا فائدہ یہ ہے کہ ڈویلپر کم میڈیا سوالات لکھتا ہے، کیونکہ لچکدار گرڈ خود بخود درمیانی سائز کے مطابق ڈھل جاتا ہے۔ میڈیا سوالات صرف اہم ساختی تبدیلیوں کے لیے ضروری ہیں، اسکرین چوڑائی کے ہر قدم کے لیے نہیں۔