This article contains 3 images. You will find them at the very end of the article.

This article contains 487 words.

Web Directions Code '23 session spotlight–CSS Container Queries: Reshaping the Way We Approach Responsive Web Design - Web Directions

Web Directions Code ’23 session spotlight–CSS Container Queries: Reshaping the Way We Approach Responsive Web Design

John Allsopp

28th March, 2023

@johnallsopp

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.

https://bit.ly/3Fm29jU

Gold

Web Directions Code

Conference Videos

Conffab Pro annual

$1495 super early bird til 31.03

$1695 early bird til 5.05

$1795 late bird

Register Gold

Silver

Web Directions Code

Conference Videos

$1295 super early bird til 31.03

$1495 early bird til 5.05

$1595 late bird

Register Silver

Streaming

Web Directions Code Live Stream

Conference Videos

$995 super early bird til 31.03

$1195 early bird til 5.05

$1295 late bird

Register Streaming

Great reading, every weekend.

We round up the best writing about the web and send it your way each Friday morning.

delivering year round learning for front end and full stack professionals

Learn more about us

Three days of talks, two of them in the engineering room. Web Directions you have broken my brain.

Cheryl Gledhill Product Manager, BlueChilli