container-name: blockquote<\/code>).<\/li><\/ul>\n\n\n\nGreat job, Ahmad! And thanks for sharing!<\/p>\n","protected":false},"excerpt":{"rendered":"
Ahmad Shadeed got an early jump on container queries and has a growing collection of examples based on everyday patterns.<\/p>\n","protected":false},"author":2508,"featured_media":373092,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Super mega virtual high fives to @shadeed9 for putting this little collection of demos together \u2014 super helpful and generous! ","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[17],"tags":[510],"class_list":["post-373087","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-links","tag-container-queries"],"acf":{"link_source":"","link_url":"","link_icon":null,"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/ishadeed-container-query-example-thumbs.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":296609,"url":"https:\/\/css-tricks.com\/lets-not-forget-about-container-queries\/","url_meta":{"origin":373087,"position":0},"title":"Let’s Not Forget About Container Queries","author":"Chris Coyier","date":"October 9, 2019","format":false,"excerpt":"Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that if we had container queries, we wouldn't write as many global media queries based on page size. That's because we're actually trying to control a more scoped container, and the\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/matryoshka-dolls.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/matryoshka-dolls.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/matryoshka-dolls.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/matryoshka-dolls.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/matryoshka-dolls.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":253471,"url":"https:\/\/css-tricks.com\/container-query-discussion\/","url_meta":{"origin":373087,"position":1},"title":"Container Query Discussion","author":"Chris Coyier","date":"April 6, 2017","format":false,"excerpt":"Right now, we have the power to write CSS that only applies when the browser window itself is at certain widths or heights. Breakpoints, as it were. Super useful. What we don't have (natively) is the ability to write conditional CSS based on any particular elements (or \"containers\") properties. It's\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":267579,"url":"https:\/\/css-tricks.com\/responsive-components-solution-container-queries-problem\/","url_meta":{"origin":373087,"position":2},"title":"Responsive Components: a Solution to the Container Queries Problem","author":"Chris Coyier","date":"February 28, 2018","format":false,"excerpt":"Container Queries, as in, the ability to style elements based on values from a particular element, like its width and height. We have media queries, but those are based on the viewport not individual elements. There are plenty of use cases for them. It's been said before, but I'll say\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":204448,"url":"https:\/\/css-tricks.com\/container-queries-once-more-unto-the-breach\/","url_meta":{"origin":373087,"position":3},"title":"Container Queries: Once More Unto the Breach","author":"Chris Coyier","date":"July 1, 2015","format":false,"excerpt":"I guess the plan is to stop with the \"element queries\" and start thinking and referring to them as \"container queries\". We've been following this saga for a while. Element queries have a serious pitfall: infinite loops. .our-element:media(min-width: 500px) { width: 499px; } As Responsive Issues Community Group member Mat\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340967,"url":"https:\/\/css-tricks.com\/a-cornucopia-of-container-queries\/","url_meta":{"origin":373087,"position":4},"title":"A Cornucopia of Container Queries","author":"Geoff Graham","date":"June 9, 2021","format":false,"excerpt":"I don't know about y'all, but my feeds have been flooded with articles about CSS Container Queries these past few weeks. The buzz about container queries actually started back in December after Miriam Suzanne posted a proposal (picking up on David Baron's proposal) but it was news in a late-March\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/container-collage.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":390654,"url":"https:\/\/css-tricks.com\/what-else-could-container-queries-query\/","url_meta":{"origin":373087,"position":5},"title":"What Else Could Container Queries… Query?","author":"Daniel Schwarz","date":"December 12, 2025","format":false,"excerpt":"How far can we really go with container queries? There are dozens of media queries now, so what if there were dozens of container queries as well? What could we use them for?","rel":"","context":"In "Notes"","block_context":{"text":"Notes","link":"https:\/\/css-tricks.com\/category\/notes\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/container-style-queries.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/container-style-queries.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/container-style-queries.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/container-style-queries.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/container-style-queries.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373087","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=373087"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373087\/revisions"}],"predecessor-version":[{"id":373093,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/373087\/revisions\/373093"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/373092"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=373087"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=373087"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=373087"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](https://calendarstemplates.com/\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/Screen-Shot-2022-08-31-at-11.13.21-AM.png?resize=2126%2C878&ssl=1\")
<\/figure>\n\n\n\n