واحد fr

واحدی مخصوص تقسیم فضا: fr

تا اینجا با واحدهایی آشنا شدیم که همگی به یک مقدار مرجع مشخص (فونت، Viewport، عرض والد) وابسته بودن. حالا وقتشه با واحدی کاملاً متفاوت آشنا بشیم که فقط و فقط در یک زمینه خاص معنا داره: fr، واحدی که مخصوص تقسیم فضای موجود در CSS Grid طراحی شده.

fr چیست؟

fr مخفف Fraction (کسر یا بخش) است. این واحد، برخلاف تمام واحدهایی که تا اینجا دیدیم، اندازه‌ای مطلق یا حتی نسبت به یک مقدار خارجی مشخص نداره؛ بلکه نشون می‌ده یک ستون یا ردیف در Grid، چه نسبتی از فضای باقی‌مانده رو باید به خودش اختصاص بده.

fr فقط در کجا استفاده می‌شود؟

این واحد منحصراً در تعریف Propertyهای مربوط به CSS Grid کاربرد داره؛ مثل grid-template-columns و grid-template-rows. جزئیات کامل CSS Grid رو در فصل مستقل خودش با عمق بیشتری بررسی می‌کنیم؛ در این درس فقط روی مفهوم خود واحد fr تمرکز می‌کنیم.

یک مثال ساده برای درک اولیه

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

<div class="container">
  <div>ستون اول</div>
  <div>ستون دوم</div>
  <div>ستون سوم</div>
</div>

در این مثال، فضای کل Grid Container به سه بخش مساوی تقسیم می‌شه؛ چون هر سه ستون مقدار برابر 1fr دارن. اگه عرض کل Container مثلاً ۹۰۰ پیکسل باشه، هر ستون دقیقاً ۳۰۰ پیکسل عرض خواهد داشت.

نسبت‌های نامساوی با fr

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

در این مثال، فضای کل به چهار بخش مساوی (۱ + ۲ + ۱ = ۴ سهم) تقسیم می‌شه: ستون اول یک سهم می‌گیره، ستون دوم دو سهم (یعنی دو برابر ستون اول و سوم)، و ستون سوم دوباره یک سهم. اگه عرض کل ۸۰۰ پیکسل باشه، ستون اول و سوم هرکدوم ۲۰۰ پیکسل، و ستون وسط ۴۰۰ پیکسل عرض خواهند داشت.

ترکیب fr با واحدهای دیگر

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

یکی از قدرتمندترین ویژگی‌های fr، امکان ترکیب راحتش با واحدهای ثابت مثل px است. در این مثال، ستون اول همیشه دقیقاً ۲۰۰ پیکسل عرض ثابت داره (مثلاً برای یک منوی کناری)، و ستون دوم، تمام فضای باقی‌مانده بعد از کم شدن اون ۲۰۰ پیکسل رو به خودش اختصاص می‌ده؛ صرف‌نظر از اینکه عرض کل Container چقدر باشه.

این الگو، یکی از رایج‌ترین کاربردهای عملی fr است: ساخت یک چیدمان با ستون کناری ثابت (Sidebar) و بخش اصلی محتوا که خودش رو با فضای باقی‌مانده تطبیق می‌ده.

تفاوت کلیدی fr با درصد (%)

ممکنه فکر کنی fr شبیه درصده، ولی یه تفاوت مهم دارن: درصد همیشه نسبت به عرض کامل Container محاسبه می‌شه، در حالی که fr نسبت به فضای باقی‌مانده بعد از کم شدن مقادیر ثابت دیگر محاسبه می‌شه.

.with-fr {
  display: grid;
  grid-template-columns: 100px 1fr;
}

.with-percent {
  display: grid;
  grid-template-columns: 100px 100%;
}

در مثال اول، ستون دوم دقیقاً فضای باقی‌مانده بعد از ۱۰۰ پیکسل اول رو می‌گیره (که نتیجه درستیه). اما در مثال دوم، ستون دوم می‌خواد ۱۰۰٪ از عرض کل Container رو بگیره، که این مقدار به‌علاوه اون ۱۰۰ پیکسل اول، از فضای Container بیشتر می‌شه و باعث سرریز (Overflow) چیدمان می‌شه. این تفاوت دقیقاً نشون می‌ده چرا fr برای تقسیم فضای Grid، طراحی و انتخاب مناسب‌تری نسبت به درصده.

fr در grid-template-rows

.layout {
  display: grid;
  grid-template-rows: 80px 1fr 60px;
  height: 100vh;
}

دقیقاً همون منطق برای ردیف‌ها هم صادقه. در این مثال، ردیف اول (مثلاً هدر) همیشه ۸۰ پیکسل ارتفاع ثابت داره، ردیف سوم (مثلاً فوتر) همیشه ۶۰ پیکسل، و ردیف وسط (بخش اصلی محتوا)، تمام فضای باقی‌مانده از کل ارتفاع صفحه (که با 100vh تعریف شده) رو به خودش اختصاص می‌ده. این الگو، یکی از رایج‌ترین روش‌ها برای ساخت چیدمان کلاسیک «هدر، محتوا، فوتر» با ارتفاع کامل صفحه است.

یک مثال کامل‌تر: چیدمان داشبورد

.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 70px 1fr;
  height: 100vh;
}

در این مثال، ترکیبی از ستون‌ها و ردیف‌ها با fr ساخته شده: یک ستون کناری ثابت ۲۵۰ پیکسلی و یک بخش اصلی که فضای باقی‌مانده رو می‌گیره؛ و همچنین یک هدر ثابت ۷۰ پیکسلی و یک بخش محتوای اصلی که باقی ارتفاع صفحه رو اشغال می‌کنه. جزئیات کامل نحوه قرار دادن عناصر داخل این ساختار Grid (با Propertyهایی مثل grid-column و grid-row) رو در فصل اختصاصی Grid با جزئیات کامل بررسی می‌کنیم.

نکات مهم

• fr فقط در کنار display: grid و Propertyهایی مثل grid-template-columns و grid-template-rows معنا و کاربرد دارد.
• مقدار fr همیشه نسبت به فضای باقی‌مانده (بعد از کسر مقادیر ثابت دیگر) محاسبه می‌شود، نه نسبت به کل عرض Container.
• ترکیب fr با واحدهای ثابت مثل px، یکی از رایج‌ترین و کاربردی‌ترین الگوهای طراحی چیدمان با Grid است.

اشتباهات رایج

• تلاش برای استفاده از fr خارج از context مربوط به CSS Grid، جایی که این واحد اصلاً معنایی ندارد.
• قاطی کردن fr با درصد، بدون توجه به این‌که fr نسبت به فضای باقی‌مانده محاسبه می‌شود، نه کل عرض Container.
• فراموش کردن این‌که نسبت بین چند مقدار fr، از تقسیم مجموع سهم‌ها به‌دست می‌آید، نه یک عدد ثابت و مستقل.

جمع‌بندی

واحد fr مخصوص تقسیم فضای باقی‌مانده در CSS Grid طراحی شده و نشان می‌دهد هر ستون یا ردیف، چه نسبتی از این فضا را باید به خود اختصاص دهد. برخلاف درصد که همیشه نسبت به کل عرض Container محاسبه می‌شود، fr فقط فضای باقی‌مانده بعد از کسر مقادیر ثابت دیگر را در نظر می‌گیرد؛ همین تفاوت، fr را به ابزاری قدرتمند و رایج برای ساخت چیدمان‌های ترکیبی (ستون ثابت + ستون انعطاف‌پذیر) تبدیل کرده است.