قالب کشسانی: اصول ساخت و تفاوت با سازگارش‌پذیر

قالب کشسانی چیست

قالب کشسانی (liquid layout، fluid layout) — رویکردی در کدنویسی است که اندازه عناصر به جای پیکسل‌های ثابت در واحدهای نسبی تعیین می‌شود. این به صفحه اجازه می‌دهد بدون پیمایش افقی همراه با پنجره مرورگر مقیاس شود.

مفهوم کدنویسی کشسانی در دوران مانیتورهای رومیزی با وضوح مختلف به وجود آمد. در سال‌های 2000، سایت‌هایی با عرض ثابت 960 پیکسل در مانیتورهای 15 اینچی و 30 اینچی ظاهر نازیبی داشتند. قالب کشسانی این مشکل را حل کرد.

به گزارش Web Almanac (2024)، 78% از سایت‌های مدرن از عناصر کدنویسی کشسانی از طریق واحدهای نسبی استفاده می‌کنند. قالب‌های کشسانی خالص کمتر مشاهده می‌شوند — اساساً در داشبوردها و پانل‌های مدیریت.

زمینه تاریخی

کدنویسی کشسانی پس از انتشار مقاله جان الساپ با عنوان «A Dao of Web Design» در سال 2000 محبوب شد، که در آن از رها کردن پیکسل‌های ثابت به نفع واحدهای نسبی دعوت کرد. این بیانیه پایه فلسفی برای تمام طراحی رسپانسیو را بنیاد گذاشت.

واحدهای نسبی اندازه‌گیری: درصدها، vw، vh

واحدهای نسبی اصلی در CSS به دو گروه تقسیم می‌شوند: نسبت به عنصر والد (درصدها) و نسبت به viewport (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 به viewport وابسته هستند و کنتینرهای والد را نادیده می‌گیرند — این برای بخش‌های تمام صفحه مناسب است.

واحد rem برای فونت‌ها

در کدنویسی کشسانی تنها تعیین عرض بلوک‌ها در واحدهای نسبی مهم نیست، بلکه اندازه فونت نیز مهم است. واحد rem (root em) اندازه متن را به عنصر ریشه HTML وابسته می‌کند. با تغییر font-size در html، می‌توان کل متن را در صفحه مقیاس کرد.

/* 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 */
}

قالب کشسانی در مقابل سازگارش‌پذیر

تفاوت اصلی بین قالب کشسانی و سازگارش‌پذیر ماهیت تغییر عرض است. قالب کشسانی با هر تغییر پنجره به صورت متصل تغییر می‌کند، اما سازگارش‌پذیر از طریق media queries به صورت گسسته تغییر می‌کند.

قالب کشسانی — مقیاس متصل، سازگارش‌پذیر — تغییر بین قالب‌های ثابت. هر رویکرد نقاط قوت و ضعف خود را دارد.

در عمل اکثر سایت‌های مدرن از رویکرد ترکیبی استفاده می‌کنند: شبکه کشسانی با واحدهای نسبی + media queries برای بریکپوینت‌های حریج. کدنویسی کشسانی خالص بدون media queries ممکن است در نمایشگرهای خیلی عریض یا خیلی باریک نامرتب به نظر برسد.

چگونه کدنویسی کشسانی را در 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)، 92% از سایت‌های در بین ۱۰۰۰ برتر از max-width برای بلوک‌های محتوایی استفاده می‌کنند. مقدار استاندارد برای قالب‌های رومیزی 1140–1200 پیکسل است.

رویکرد ترکیبی: کشسانی + سازگارش‌پذیر

طراحی وب مدرن به ندرت از رویکرد کشسانی یا سازگارش‌پذیر خالص استفاده می‌کند. روش ترکیبی مزایای هر دو را ترکیب می‌کند: شبکه کشسانی در واحدهای نسبی + media queries برای تغییرات ساختاری جهانی.

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

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

در دسکتاپ قالب از ستون‌های کشسانی 1fr و 3fr استفاده می‌کند — نسبت در هر عرضی از پنجره حفظ می‌شود. در موبایل media query به طرح یک ستونه تغییر می‌کند، جایی که ستون‌ها به صورت عمودی قرار می‌گیرند.

مزیت رویکرد ترکیبی — توسعه‌دهنده کمتر media queries می‌نویسد، زیرا شبکه کشسانی خودکار خود را با اندازه‌های وسیط تطبیق می‌دهد. Media queries تنها برای تغییرات حریج ساختار لازم است، نه برای هر مرحله عرض نمایشگر.