What is Container Query?
Turkish: Container Query
A container query lets CSS change a component's styles based on its container size instead of the browser viewport width.
What is a Container Query?
A container query makes responsive design depend on the space a component has, not only on the width of the browser window. The same product card can be wide in the main content area and narrow inside a sidebar; container queries let it use different styles in those two contexts.
How Does It Work?
First, a parent element is marked with container-type. Then styles are written inside an @container rule using conditions such as width, height, or inline size. The component adapts to its own layout context instead of relying on global page breakpoints.
This is especially useful for reusable design system components. Cards, filters, metric widgets, and navigation blocks can be used in different CSS grid areas without duplicating component variants.
Difference from Media Queries
A media query measures the browser viewport. A container query measures the box that contains the component. That makes it more precise for grid layout, sidebars, embedded widgets, and dynamic dashboard screens.
What to Watch
Container queries do not remove the need for clear layout structure. The container hierarchy should be intentional, query thresholds should match real component breakpoints, and fallback behavior should be considered if older browser support matters.
Business Use
Corporate websites, SaaS dashboards, and e-commerce interfaces often reuse the same component in many page regions. Container queries make those components more portable, reducing one-off CSS overrides and keeping design system behavior easier to maintain.