مقدمه

در CSS Grid Layout یک واحد انعطاف‌پذیر جدید به نام fr معرفی شده است.

واحد fr مخفف Fractional Unit یا «واحد کسری» است و برای تقسیم فضای خالی بین ستون‌ها و ردیف‌های Grid استفاده می‌شود.

به‌عنوان مثال:

1fr

یعنی یک سهم از فضای موجود.

مثال اولیه استفاده از fr

.container {
  display: grid;

  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 100px 200px 100px;

  grid-template-areas:
        "head head2 . side"
        "main main2 . side"
        "footer footer footer footer";
}

در این مثال:

grid-template-columns: 1fr 1fr 1fr 1fr;

چهار ستون با اندازه مساوی ایجاد می‌کند.

هر ستون یک سهم برابر از فضای موجود دریافت می‌کند.

نمونه‌های مختلف استفاده از fr

در مثال زیر، ترکیبی از fr، پیکسل و درصد استفاده شده است:

.container {

  grid-template-columns: 1fr 1fr 40px 20%;
  grid-template-rows: 100px 200px 100px;

}

در این حالت:

• ستون اول → 1fr
• ستون دوم → 1fr
• ستون سوم → 40px
• ستون چهارم → 20%

فضای باقی‌مانده بین دو ستون 1fr تقسیم می‌شود.

مثال با 2fr

.container {

  grid-template-columns: 1fr 1fr 40px 2fr;
  grid-template-rows: 100px 200px 100px;

}

در این مثال:

2fr

یعنی ستون آخر دو برابر فضای ستون‌هایی را می‌گیرد که 1fr دارند.

بنابراین:

• ستون اول → 1 سهم
• ستون دوم → 1 سهم
• ستون آخر → 2 سهم

در نتیجه ستون آخر دو برابر پهن‌تر خواهد بود.

ترکیب واحدهای مختلف (Mixed Units)

یکی از مزیت‌های مهم fr این است که می‌توان آن را با واحدهای دیگر ترکیب کرد:

• px
• %
• auto
• fr

مثال:

main {
  width: 800px;
  display: grid;

  grid-template-columns: 300px 10% 1fr 1fr;

  grid-template-rows: auto;
}

نحوه محاسبه ستون‌ها

عرض کل:

800px

ستون اول:

300px

ستون دوم:

10%

یعنی:

80px

فضای باقی‌مانده:

800 - 300 - 80 = 420px

اکنون این 420px بین دو ستون 1fr تقسیم می‌شود:

210px

پس نتیجه نهایی:

• ستون اول → 300px
• ستون دوم → 80px
• ستون سوم → 210px
• ستون چهارم → 210px

جمع‌بندی

واحد fr در CSS Grid یکی از بهترین روش‌ها برای طراحی Layoutهای Responsive و انعطاف‌پذیر است.

مزایای مهم:

• تقسیم هوشمند فضای خالی
• طراحی ریسپانسیو آسان‌تر
• خوانایی بهتر کد
• ترکیب آسان با px و %

نمونه ساده:

grid-template-columns: 1fr 1fr;

یعنی دو ستون با اندازه برابر.