minmax() و repeat()

مرور تخصصی: minmax() و repeat() در بستر Grid

در فصل ۱۳ (CSS Grid)، با هر دوی این توابع، در بستر عملی خودشون، آشنا شدیم. چون این دو تابع، عمیقاً به Grid وابسته‌ان (برخلاف calc()، min()، max() و clamp() که در درس قبل دیدیم و در همه‌جای CSS کاربرد دارن)، این درس، یک مرور متمرکز و تخصصی روی همون دو تابعه؛ با تمرکز بیشتر روی خود Syntax و منطق ریاضی‌شون، نه لزوماً کاربرد در چیدمان.

minmax(): یک بازه، به‌جای یک مقدار ثابت

.container {
  display: grid;
  grid-template-columns: minmax(100px, 300px) 1fr;
}

همون‌طور که در درس ۱۳-۶ دیدیم، تابع minmax(min, max)، دقیقاً دو پارامتر می‌گیره: کوچک‌ترین و بزرگ‌ترین اندازه مجاز برای یک Track. این تابع، فقط داخل Propertyهای مرتبط با اندازه‌گیری Track در Grid (مثل grid-template-columns، grid-template-rows، و grid-auto-columns/grid-auto-rows که در درس ۱۳-۸ دیدیم) معتبره.

پارامترهای قابل قبول در minmax()

.a { grid-template-columns: minmax(100px, 1fr); }
.b { grid-template-columns: minmax(min-content, 300px); }
.c { grid-template-columns: minmax(10%, max-content); }
.d { grid-template-columns: minmax(auto, 500px); }

هر دو پارامتر minmax()، می‌تونن هر ترکیبی از مقادیر مختلفی باشن که تا اینجا در دوره دیدیم: مقادیر ثابت (px)، درصدی، fr (که در فصل ۶ و ۱۳ دیدیم)، یا حتی مقادیر مبتنی بر محتوا مثل min-content و max-content (که در درس ۱۳-۷ کامل بررسی‌شون کردیم).

یک محدودیت مهم: fr در پارامتر اول minmax() مجاز نیست

.wrong {
  grid-template-columns: minmax(1fr, 300px); /* نامعتبر */
}

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

repeat(): جلوگیری از تکرار دستی الگوها

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

همون‌طور که در درس ۱۳-۳ دیدیم، تابع repeat(count, track-list)، دو پارامتر می‌گیره: تعداد تکرار، و الگویی که باید تکرار بشه.

تکرار یک الگوی چندبخشی

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px 20px);
}

نکته مهمی که شاید در فصل ۱۳ کامل بهش اشاره نکردیم: پارامتر دوم repeat()، می‌تونه خودش، شامل چند مقدار (نه فقط یکی) باشه. در این مثال، الگوی 100px 20px (یعنی یک ستون محتوا و یک ستون باریک، مثلاً برای فاصله‌گذاری دستی)، سه بار، پشت‌سرهم، تکرار می‌شه؛ یعنی در نهایت شش ستون خواهیم داشت: ۱۰۰، ۲۰، ۱۰۰، ۲۰، ۱۰۰، ۲۰ پیکسل.

کلیدواژه‌های auto-fit و auto-fill به‌جای عدد

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

همون‌طور که در درس ۱۳-۶ به‌طور کامل بررسی کردیم، به‌جای یک عدد ثابت، می‌شه از کلیدواژه‌های auto-fit یا auto-fill استفاده کرد تا مرورگر، خودش، بر اساس فضای موجود، تعداد تکرار مناسب رو محاسبه کنه؛ این ترکیب، همراه با minmax()، یکی از قدرتمندترین الگوهای Grid واکنش‌گراست که در فصل ۱۳ و ۱۴ دیدیم.

ترکیب repeat() با مقادیر ثابت در کنارش

.layout {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr) 200px;
}

repeat()، لازم نیست تنها بخش یک تعریف grid-template-columns باشه؛ می‌شه، قبل یا بعدش، مقادیر ثابت دیگه هم اضافه کرد. در این مثال، دو ستون ثابت ۲۰۰ پیکسلی، در دو طرف، و سه ستون مساوی و انعطاف‌پذیر، در وسط، تعریف شدن.

ترکیب minmax() و repeat() با هم: خلاصه‌ای از قدرت این دو تابع

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

این ترکیب، که کاملاً در فصل ۱۳ و ۱۴ کاویدیمش، خلاصه‌ی قدرت این دو تابع کنار همه: repeat() مسئول تولید خودکار تعداد مناسب ستون، و minmax() مسئول تعیین بازه مجاز اندازه هر ستونه.

جدول جمع‌بندی محدودیت‌های Syntax

تابع	کجا معتبر است	محدودیت مهم
minmax()	فقط در تعریف اندازه Track در Grid	fr، به‌عنوان پارامتر اول (حداقل)، مجاز نیست
repeat()	فقط در grid-template-columns/rows	پارامتر اول باید عدد یا auto-fit/auto-fill باشد

نکات مهم

• minmax() و repeat()، برخلاف calc/min/max/clamp، فقط در بستر تعریف Track در CSS Grid معتبر و کاربردی هستند.
• پارامتر دوم repeat() می‌تواند شامل چند مقدار باشد که، در هر تکرار، همگی با هم تکرار می‌شوند.
• واحد fr، به‌عنوان حداقل (پارامتر اول) در minmax()، مجاز نیست؛ چون ذاتاً مقداری نسبی و نه یک کف مشخص است.

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

• تلاش برای استفاده از minmax(1fr, 300px)، که به‌خاطر قرار دادن fr در پارامتر اول، نامعتبر است.
• فراموش کردن این‌که پارامتر دوم repeat() می‌تواند چند مقدار داشته باشد، نه فقط یک مقدار تکی.
• استفاده از minmax() یا repeat() در Propertyهایی خارج از بستر Grid، جایی که این توابع اصلاً معنا و کاربرد ندارند.

جمع‌بندی

minmax() یک بازه (حداقل و حداکثر) برای اندازه یک Track در Grid تعریف می‌کند، با این محدودیت که fr نمی‌تواند به‌عنوان پارامتر اول (حداقل) استفاده شود. repeat() از تکرار دستی الگوهای یکسان یا حتی چندبخشی جلوگیری می‌کند و می‌تواند با کلیدواژه‌های auto-fit و auto-fill نیز ترکیب شود. این دو تابع، اختصاصاً برای Grid طراحی شده‌اند و ترکیب‌شان، یکی از پرکاربردترین الگوهای چیدمان واکنش‌گرا در CSS مدرن است.