پرس و جوهای کانتینر در مرورگرهای پایدار قرار می گیرند

برای استفاده از پرس و جوهای کانتینر، ابتدا Containment را روی یک عنصر والد تنظیم کنید. این کار را با تنظیم یک container-type در کانتینر اصلی انجام دهید، یا از مخفف container استفاده کنید تا هم‌زمان یک نوع و نام به آن بدهید:

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

تنظیم container-type به inline-size اندازه جهت درونی والد را جستجو می کند. در زبان های لاتین مانند انگلیسی، این عرض کارت است، زیرا متن از چپ به راست به صورت خطی جریان می یابد.

اکنون، می‌توانید از آن ظرف برای اعمال استایل‌ها به هر یک از فرزندانش با استفاده از @container استفاده کنید:

.card-child {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

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

بعلاوه، می توانید از مقادیر واحد طول پرس و جوی کانتینر به همان روشی که از مقادیر واحد مبتنی بر viewport استفاده می کنید استفاده کنید. تفاوت در این است که واحدهای کانتینر با کانتینر مطابقت دارند تا درگاه دید. مثال زیر تایپوگرافی پاسخگو را با استفاده از واحدهای پرس و جوی کانتینر و clamp() نشان می دهد تا مقدار حداقل و حداکثر اندازه را ارائه دهد:

.card-child h2 {
  font-size: clamp(2rem, 15cqi, 4rem);
}

15cqi بالا به 15 درصد از اندازه درون خطی ظرف اشاره دارد. تابع clamp() به این مقدار حداقل 2rem و حداکثر 4rem می دهد. در ضمن، اگر 15cqi بین این مقادیر باشد، متن به همان نسبت کوچک شده و رشد می کند.