۰ امیر حق شناس
خلاصه مطالب جلسه هشتم - grid در css - مفهوم fraction و توابع در css grid
جامعه Html & CSS ایجاد شده در ۰۴ آبان ۱۴۰۴

🔹 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 برای کنترل حداقل و حداکثر اندازه ستون‌ها به کار رفته