🧠 اگه هنوز برای هر Layout سراغ Flexbox و Grid می‌ری، یه قابلیت CSS رو جدی‌تر ببین

اسمش Container Queriesـه.

مشکل Media Query اینه که معمولاً بر اساس اندازه‌ی Viewport تصمیم می‌گیری.

مثلاً:

@media (max-width: 768px) {
  .card {
    ...
  }
}

ولی فرض کن همین Card یک بار داخل Sidebar قرار بگیره و یک بار داخل محتوای اصلی.

حالا Viewport یکیه، ولی فضای واقعی Card کاملاً فرق داره.

اینجاست که Container Query جذاب میشه:

.card-wrapper {
  container-type: inline-size;
}

@container (max-width: 500px) {
  .card {
    grid-template-columns: 1fr;
  }
}

حالا خود Component بر اساس فضایی که در اختیارشه تصمیم می‌گیره، نه اندازه کل صفحه.

🔥 این دقیقاً همون چیزی‌یه که برای ساخت Componentهای قابل استفاده مجدد لازم داری.

به‌خصوص در Design Systemهای بزرگ.

💡قابلیت Responsive Design داره از «Responsive Page» به سمت Responsive Component حرکت می‌کنه.


این روند هم در بررسی‌های جدید اکوسیستم Frontend به‌عنوان یکی از قابلیت‌های مهم CSS مدرن مطرح شده.

@CodeVerse_dev