Chapter 13: Container queries
There are currently two types of container queries: Container size queries and container style queries. Size queries are well-supported. Style queries are not well-supported as of this recording.
13: Slides
This is the same deck as Flexbox and Grid. We'll start at slide 35.
13a: Container size queries
Using this reference CodePen, explore how we have 4 different card layouts. These show up at different dimensions, depending on media query.
Refactor our cards from a media query focus to a focus on container size. Learn how to set up the different card layouts using container queries.
13b: Featured card - You try it
Now – our first card has different behaviors through these breakpoints, so let’s set up styles for it as a featured card. The featured card never changes layout once it's initially set, so let's style that up.
13c: Laying out cards on the page
Now that we’ve programmed our cards to behave at certain sizes, we can place them into a layout - using media queries.