واحد fr سهمی از فضای آزاد شبکه رو بیان می‌کنه. وقتی دو ستون با 1fr و 2fr تعریف می‌کنی، ستون دوم دو برابر سهم ستون اول رو می‌گیره. قبل از تقسیم سهم‌ها، فاصله‌ها و ستون‌های ثابت از عرض در دسترس کم می‌شن. این واحد به معنی درصد ثابت از کل صفحه نیست؛ فقط فضای شبکه‌ای رو که داخلش تعریف شده تقسیم می‌کنه.
توی مثال، عرض سیصد پیکسل بدون فاصله بین سه ستون برابر تقسیم می‌شه و هر ستون صد پیکسل می‌گیره. تمرین دو ستون نابرابر داره و عرضش عمداً ثابت انتخاب شده تا محاسبه روشن باشه. در مثال‌های سهم‌بندی، نوشتن 1 و 2 بدون واحد fr معتبر نیست؛ در تمرین، نتیجه محاسبه را با واحد px می‌نویسیم. محتوای تمرین کوتاهه و مانع حداقل اندازه ستون نمی‌شه. نتیجه رو با جمع سهم‌ها بررسی کن: مجموع سه سهمه و ستون‌ها به ترتیب یک و دو سهم می‌گیرن. جهت فارسی ترتیب شروع ستون‌ها رو تغییر می‌ده، اما نسبت اندازه‌ها همونه.
✍️ مثال حل‌شده:
<div class="equal"><span>الف</span><span>ب</span><span>ج</span></div>
<style>.equal { display:grid; width:300px; grid-template-columns:1fr 1fr 1fr; gap:0; }</style>
حالا نوبت توئه: نسبت ۱ به ۲ را برای عرض ۴۸۰ پیکسل حساب کن و ظرف .ratio را با display:grid، width:480px، grid-template-columns:160px 320px و gap:0 بساز. اندازه ستون‌ها را دقیقاً با همین دو مقدار پیکسلی جداگانه بنویس، بدون fr یا repeat. دو متن را حفظ کن و padding یا border اضافه نکن.
فعالیت شما
نسبت ۱ به ۲ را برای عرض ۴۸۰ پیکسل حساب کن و ظرف .ratio را با display:grid، width:480px، grid-template-columns:160px 320px و gap:0 بساز. اندازه ستون‌ها را دقیقاً با همین دو مقدار پیکسلی جداگانه بنویس، بدون fr یا repeat. دو متن را حفظ کن و padding یا border اضافه نکن.