Web Directions Year round learning for product, design and engineering professionals

CSS Container Queries: Reshaping the Way We Approach Responsive Web Design

The rise of component-based architecture has brought new challenges to web developers, including the need for more granular control over layouts within individual components. While media queries have been a cornerstone of responsive web design for over a decade, they fall short when it comes to solving layout issues at the component level. Enter CSS container queries, a new tool that allows developers to style components based on their available space within a containing element. With container queries, we can use the same component everywhere, but it’s restyling itself to fit best within the UI where it lives.

In this talk, we will explore the capabilities of container queries and how they can be used to achieve complex layouts without the need for heavy scripting or ResizeObserver hacks. We will cover the different container types, including inline-size and size, and showcase real-world examples of container queries in action with flexbox and grid.

Trung Vo

Trung is a passionate engineer who brings beautiful, performant, and best engineering practices to web application production. Currently with Ascenda Loyalty, he simplifies loyalty for banks, payment networks, and merchants globally.

Trung is also an organizer for Angular Singapore and Angular Vietnam, supporting the tech community. He authored Angular Spotify and Angular Jira Clone, notable open-source projects. With expertise in frontend architecture, scalability, and performance, Trung enjoys sharing knowledge and helping fellow engineers succeed.