๐๐ผ๐ป๐๐ฎ๐ถ๐ป๐ฒ๐ฟ ๐ค๐๐ฒ๐ฟ๐ถ๐ฒ๐: ๐๐ฒ๐๐๐ฒ๐ฟ ๐ง๐ต๐ฎ๐ป ๐ ๐ฒ๐ฑ๐ถ๐ฎ ๐ค๐๐ฒ๐ฟ๐ถ๐ฒ๐
Responsive design used to rely on one tool: Media Queries.
Media queries look at the screen size. This works for full page layouts. It fails for individual components.
A component might sit in a narrow sidebar on a desktop. A media query sees a wide screen and keeps the component in a wide layout. The component breaks because it lacks space.
Container Queries solve this. They let a component respond to its parent container instead of the screen.
How to use them:
Define the parent as a container: .wrapper { container-type: inline-size; }
Write a query for the child: @container (max-width: 500px) { .card { flex-direction: column; } }
The component now adapts to the space it occupies.
This makes components truly reusable. You can move a card from a sidebar to a main content area without writing new CSS.
Use Media Queries for:
- Page layouts
- Navigation menus
- Screen size changes
Use Container Queries for:
- Product cards
- Dashboard widgets
- Pricing tables
- Sidebar blocks
- Reusable UI components
Stop asking how wide the screen is. Start asking how much space your component has.
Container Queries are ready for modern browsers. They make your CSS modular and predictable.
Source: https://dev.to/muhammadmedhat/container-queries-the-css-feature-i-wish-i-had-years-ago-2h63