Container Queries در CSS: انقلابی در طراحی ریسپانسیو ۲۰۲۵

ارسال توسط

مهدی حبیبی

10 جولای 2026

در تاریخ 10 جولای 2026

Container Queries یکی از مهم‌ترین تغییرات CSS در سال ۲۰۲۵ هست که طراحی ریسپانسیو رو کاملاً متحول کرده. تا حالا ما فقط Media Queries داشیم که بر اساس اندازه صفحه کار می‌کرد، اما الان می‌تونیم بر اساس اندازه المان والد استایل بدیم.

Container Queries چیست؟

Container Queries به شما اجازه می‌ده استایل یک المان رو بر اساس اندازه container والد اون تعیین کنید، نه بر اساس اندازه کل صفحه. این یعنی یه کامپوننت می‌تونه در یه sidebar باریک یه شکل نشون بده و در یه صفحه اصلی عریض یه شکل دیگه.

تفاوت با Media Queries

Media Queries: بر اساس viewport (اندازه کل پنجره مرورگر)
Container Queries: بر اساس اندازه المان والد (container)

نحوه استفاده از Container Queries

مرحله ۱: تعریف Container

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

مرحله ۲: نوشتن Container Query

@container (min-width: 400px) {
  .card {
    display: flex;
    flex-direction: row;
  }
}
@container (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

مثال کامل: کارت محصول ریسپانسیو

.product-container {
  container-type: inline-size;
}
.product-card {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  border-radius: 12px;
  background: white;
}
@container (min-width: 400px) {
  .product-card {
    flex-direction: row;
  }
}

Container Query Units

cqw يا ۱٪ عرض container
cqh يا ۱٪ ارتفاع container
cqi يا ۱٪ inline-size

پشتیبانی مرورگرها

Chrome 105+
Firefox 110+
Safari 16+
Edge 105+

موارد استفاده عملي

۱. کارت‌های محصول در فروشگاه اينترنتي

يه کارت محصول می‌تونه تو صفحه اصلی عريض باشه و تو سايدبار باریک بدون تغییر کد عالی نشون داده بشه.

۲. سيستم Grid پويا

.grid-container {
  container-type: inline-size;
}
@container (min-width: 800px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }
}