🔹 1. مفهوم Fraction (واحد fr)

• fr مخفف fractional unit یعنی واحد کسری
• به صورت تقسیم فضای باقیمانده بین ستون‌ها یا ردیف‌ها عمل می‌کند

• مثال:

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

  یعنی فضا به 6 قسمت تقسیم می‌شود

  2 قسمت ستون اول، 1 قسمت ستون دوم، 3 قسمت ستون سوم

🔹 2. تابع repeat()

• برای جلوگیری از تکرار دستی مقادیر در grid
• ساختار:
  repeat(تعداد, اندازه)
• مثال‌:

  • repeat(4, 100px)

    یعنی 4 ستون 100px

  • repeat(4, 1fr)

  • یعنی 4 ستون تقسیم‌شونده برابر

🔹 3. تابع minmax()

• مشخص کردن حداقل و حداکثر اندازه برای ستون یا ردیف
• ساختار:
  minmax(min, max)

• مثال:

   

  grid-template-columns: minmax(300px, auto) 1fr 1fr auto;
  

  ستون اول کمتر از 300px نمی‌شود و تا اندازه محتوا می‌تواند بیشتر شود

✅ نکات مهم:

• از fr برای رسپانسیو شدن و تقسیم هوشمندانه فضا استفاده شده
• minmax برای کنترل حداقل و حداکثر اندازه ستون‌ها به کار رفته