media queryها به اندازهٔ پنجرهٔ مرورگر نگاه می‌کنند؛ اما یک کارت وقتی در سایدبار باریک قرار می‌گیرد با زمانی که در ستون اصلی است نیاز متفاوتی دارد. container queries مشکل را حل می‌کند: کامپوننت به عرض «ظرفِ خودش» واکنش نشان می‌دهد.

دو قدم ساده

اول والد را به‌عنوان ظرف معرفی می‌کنید، بعد با @container شرط می‌گذارید:

.card-wrap {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 480px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
  }
}

چرا بهتر از media query است؟

  • کامپوننت هر جا قرار بگیرد درست رفتار می‌کند؛ لازم نیست درباره صفحهٔ میزبان فرضیه بسازید.
  • طراحی سیستم و کتابخانهٔ کامپوننت ساده‌تر می‌شود چون استایل‌ها داخل خود کامپوننت می‌مانند.
  • واحدهای cqw و cqi اندازه را نسبت به ظرف می‌دهند.

نکات

عنصری که container-type دارد خودش نمی‌تواند به اندازهٔ همان ظرف پاسخ بدهد؛ فقط فرزندانش تحت تأثیر قرار می‌گیرند. برای سادگی از inline-size استفاده کنید تا فقط عرض دنبال شود.