DEV Community

Cover image for A CSS container queries example

A CSS container queries example

Ingo Steinke, web developer on January 11, 2022

CSS container queries are similar to media queries, but related to a container element size rather than the viewport size. While adaptive layouts o...
Read full post
Collapse
 
ingosteinke profile image
Ingo Steinke, web developer • • Edited

Thanks to Una for suggesting to update my code example!
This is only one property change that makes the code much more human-readable:

.container {
    container-type: inline-size; /* obsoletes old experimental contain: property */
}
Enter fullscreen mode Exit fullscreen mode

For more details and other possible container-type values, see:

ingosteinke

CSS Container Query Syntax Update 2022: container-type

Ingo Steinke ・ Aug 30 ・ 3 min read

#webdev #css #news #tutorial
Collapse
 
sandeshsapkota profile image
sandeshsapkota •

Great post. I am wondering to find use cases of container-type: size; . since after we apply as size the element looses the height. I could not find any example on the purpose of using size.

Collapse
 
drwebmagazin profile image
Dr. Web •

Great article! For everyone who likes to see more code snippets and examples, here’s a good read about Container Queries (in German)