min-content، max-content، fit-content()

اندازه‌گیری بر اساس خود محتوا: min-content، max-content و fit-content()

در درس‌های قبل، اندازه ستون‌ها رو با مقادیر ثابت، درصدی، fr و minmax() کنترل کردیم. حالا وقتشه با سه مقدار دیگه آشنا بشیم که، به‌جای اتکا به فضای Container یا اعداد دلخواه، مستقیماً بر اساس محتوای واقعی داخل هر Track، اندازه رو محاسبه می‌کنن.

min-content: کوچک‌ترین اندازه ممکن بدون سرریز

.container {
  display: grid;
  grid-template-columns: min-content 1fr;
}

min-content اندازه‌ای رو مشخص می‌کنه که برابر کوچک‌ترین فضای ممکنیه که یک محتوا، بدون سرریز کردن، می‌تونه توش جا بشه. برای متن، این یعنی عرض طولانی‌ترین کلمه‌ای که نمی‌شه بیشتر از اون شکستش (چون فاصله‌ای برای شکستن نداره).

<div class="container">
  <div>این یک متن با کلمات معمولی است.</div>
  <div>محتوای ستون دوم</div>
</div>

در این مثال، ستون اول، فقط به‌اندازه طولانی‌ترین کلمه داخلش (که معمولاً باعث می‌شه بقیه متن، به چند خط بشکنه) عرض می‌گیره؛ نه بیشتر.

max-content: بزرگ‌ترین اندازه ممکن بدون هیچ شکست خط

.container {
  display: grid;
  grid-template-columns: max-content 1fr;
}

max-content، برعکس min-content، اندازه‌ای رو مشخص می‌کنه که برابر عرض کامل محتوا باشه، بدون هیچ شکست خطی؛ یعنی اگه محتوا یک متن طولانی باشه، ستون، اونقدر بزرگ می‌شه که کل اون متن، در یک خط واحد جا بشه.

<div class="container">
  <div>این یک متن نسبتاً طولانی است که در حالت max-content هرگز نمی‌شکند.</div>
  <div>محتوای ستون دوم</div>
</div>

در این مثال، ستون اول، به‌اندازه کل عرض این جمله طولانی، گسترش پیدا می‌کنه؛ حتی اگه این کار باعث بشه ستون، خیلی پهن بشه یا حتی از عرض Container بیرون بزنه.

مقایسه بصری min-content و max-content

مقدار	رفتار	مثال برای یک جمله طولانی
min-content	کمترین عرض ممکن؛ متن تا حد امکان می‌شکند	عرض معادل طولانی‌ترین کلمه
max-content	بیشترین عرض ممکن؛ متن هرگز نمی‌شکند	عرض معادل کل جمله در یک خط

fit-content(): ترکیب هوشمند min-content و یک حداکثر مشخص

.container {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr;
}

تابع fit-content()، رفتاری بینابین داره: تا وقتی محتوا کوچیکه، ستون، دقیقاً به‌اندازه همون محتوا (شبیه max-content) کوچیک می‌مونه؛ ولی اگه محتوا از یک حد مشخص (که به‌عنوان پارامتر ورودی تابع می‌دیم) بزرگ‌تر بشه، ستون، دیگه بیشتر از اون حد رشد نمی‌کنه و محتوا مجبور می‌شه بشکنه (شبیه رفتار یک max-width).

<div class="container">
  <div>متن کوتاه</div>
</div>
<div class="container">
  <div>این یک متن بسیار طولانی است که از ۲۰۰ پیکسل عرض بیشتر می‌شود و باید بشکند.</div>
</div>

در مثال اول، چون «متن کوتاه» کوچیکه، ستون، فقط به همون اندازه محتوا، جمع می‌شه. در مثال دوم، چون متن طولانی‌تر از ۲۰۰ پیکسله، ستون، دقیقاً روی ۲۰۰ پیکسل متوقف می‌شه و بقیه متن، مجبور به شکستن می‌شه.

fit-content() در مقابل minmax()

ممکنه fit-content(200px) شبیه minmax(min-content, 200px) به‌نظر برسه؛ و در واقع، از خیلی جهات، رفتار مشابهی دارن. تفاوت اصلی‌شون در این‌جاست: fit-content()، به‌طور خاص، برای محدود کردن رشد یک ستون بر اساس محتوا طراحی شده و Syntax ساده‌تری داره؛ در حالی که minmax()، ابزاری عمومی‌تر برای هر نوع بازه دلخواهه (نه لزوماً وابسته به محتوا).

کاربرد عملی: ستون‌های جدول با اندازه هوشمند

.data-table {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  gap: 12px;
}

<div class="data-table">
  <div>نام</div>
  <div>توضیحات</div>
  <div>قیمت</div>
  <div>محصول الف</div>
  <div>یک توضیح نسبتاً طولانی درباره این محصول</div>
  <div>۱۵۰,۰۰۰ تومان</div>
</div>

در این مثال، ستون اول (نام) و ستون سوم (قیمت)، هرکدوم دقیقاً به‌اندازه محتوای واقعی‌شون (با max-content) عرض می‌گیرن؛ و ستون وسط (توضیحات)، تمام فضای باقی‌مانده رو (با 1fr) اشغال می‌کنه. این ترکیب، باعث می‌شه ستون‌های کوتاه (مثل قیمت)، فضای غیرضروری اشغال نکنن، و ستون بلند (توضیحات)، بیشترین فضای ممکن رو بگیره.

یک مثال کاربردی دیگر: یک برچسب (Badge) با عرض هوشمند

.badge {
  display: grid;
  grid-template-columns: fit-content(150px);
}

این تکنیک، برای عناصری مثل برچسب یا تگ مفیده که می‌خوایم عرض‌شون، دقیقاً متناسب با محتوای کوتاه‌شون باشه، ولی اگه به هر دلیلی محتوا طولانی‌تر شد، از یک حد مشخص (اینجا ۱۵۰ پیکسل) بیشتر نشه.

نکات مهم

• min-content کمترین عرض ممکن (بر اساس طولانی‌ترین کلمه غیرقابل‌شکست) را می‌دهد؛ max-content بیشترین عرض ممکن (بدون هیچ شکست خطی) را.
• fit-content() رفتاری بینابین دارد: تا یک حد مشخص، مثل max-content عمل می‌کند، و بعد از آن، دیگر رشد نمی‌کند.
• این سه مقدار، برخلاف fr یا درصد، مستقیماً بر اساس محتوای واقعی داخل هر Track محاسبه می‌شوند، نه فضای کلی Container.

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

• استفاده از max-content برای ستون‌هایی که ممکن است محتوای بسیار طولانی داشته باشند، بدون در نظر گرفتن خطر سرریز از Container.
• قاطی کردن min-content و max-content؛ اولی محتوا را تا حد امکان می‌شکند، دومی هرگز اجازه شکست نمی‌دهد.
• استفاده نادرست از fit-content() به‌جای minmax() در مواردی که نیاز به یک بازه کاملاً دلخواه (نه لزوماً وابسته به محتوا) وجود دارد.

جمع‌بندی

min-content، max-content و fit-content()، برخلاف واحدهای دیگر Grid، اندازه یک Track را مستقیماً بر اساس محتوای واقعی داخل آن محاسبه می‌کنند. min-content کوچک‌ترین اندازه ممکن بدون سرریز را می‌دهد، max-content بزرگ‌ترین اندازه بدون هیچ شکست خطی را، و fit-content() ترکیبی هوشمند از این دو با یک سقف مشخص است؛ این ابزارها، مخصوصاً برای ستون‌هایی مثل جداول داده یا برچسب‌ها که باید دقیقاً متناسب با محتوای واقعی‌شان باشند، بسیار کاربردی هستند.