Container queries give us more control over our responsive layouts, as well as helping us write more concise, robust and maintainable CSS. Now that they enjoy widespread browser support, it’s a great time to give them a try. The great thing is you don’t have to go all-in straight away: if there’s a component you’re struggling to build with media queries it’s worth taking a look at container queries, as they could be the answer you’re looking for.
<div class="wrapper-container"> <div class="wrapper"> <main class="grid-container"> <h2>Latest stories</h2> <ul class="grid"> <li class="article-container"> <article> <img src="https://images.unsplash.com/photo-1550098612-4838745601bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NTQ1ODh8&ixlib=rb-4.0.3&q=80&w=400" alt="Bluetit on a branch" /> <div> <h3> Why all fossil fuels must decline rapidly to stay below 1.5C </h3> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Exercitationem, nihil explicabo adipisci iste saepe reiciendis. </p> </div> </article> </li> <li class="article-container"> <article> <img src="https://images.unsplash.com/photo-1551802230-22c087b11df2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE2MDN8&ixlib=rb-4.0.3&q=80&w=400" alt="Tree at sunset" /> <div> <h3> Africa's extreme weather has killed at least 15,000 people in 2023 </h3> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut illo, possimus voluptates. </p> </div> </article> </li> <li class="article-container" style="--featured: true"> <article> <img src="https://images.unsplash.com/photo-1589787787683-59c1409124c7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE2NTB8&ixlib=rb-4.0.3&q=80&w=400" alt="Robin on a branch" /> <div> <h3> Fixing the gaps in England's ‘biodiversity net-gain' policy </h3> <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae sapiente quisquam voluptate omnis. </p> </div> </article> </li> <li class="article-container"> <article> <img src="https://images.unsplash.com/photo-1546367564-e9be23af3d14?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE5NzV8&ixlib=rb-4.0.3&q=80&w=400" alt="Car driving in snow" /> <div> <h3>Factcheck: 21 misleading myths about electric vehicles</h3> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut illo, possimus voluptates accusamus nihil culpa odit vitae. </p> </div> </article> </li> <li class="article-container"> <article> <img src="https://images.unsplash.com/photo-1582032951374-314efb7ccb76?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE0Njd8&ixlib=rb-4.0.3&q=80&w=400" alt="Arctic sea ice" /> <div> <h3>Global temperatures throughout mid-2023 shatter records</h3> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut illo, possimus voluptates accusamus nihil culpa odit vitae. </p> </div> </article> </li> <li class="article-container"> <article> <img src="https://images.unsplash.com/photo-1509391366360-2e959784a276?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE3MDR8&ixlib=rb-4.0.3&q=80&w=400" alt="Solar panels" /> <div> <h3> UK renewables still cheaper than gas, despite auction setback for offshore wind </h3> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut illo, possimus voluptates accusamus nihil culpa odit vitae. </p> </div> </article> </li> <li class="article-container"> <article> <img src="https://images.unsplash.com/photo-1679820024011-d7c428c47a36?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE4MjZ8&ixlib=rb-4.0.3&q=80&w=400" alt="Wind turbine from below" /> <div> <h3> EU's use of fossil fuels for electricity falls 17% to ‘record low' in first half of 2023 </h3> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut illo, possimus voluptates accusamus nihil culpa odit vitae. </p> </div> </article> </li> </ul> </main> <aside class="grid-container"> <h2>Popular this week</h2> <ul class="grid"> <li class="article-container"> <article> <img src="https://images.unsplash.com/photo-1615053835734-7752878e939e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE5MDh8&ixlib=rb-4.0.3&q=80&w=400" alt="Power plant" /> <div> <h3> Plans for new oil and gas power plants have grown by 13% in 2023 </h3> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut illo, possimus voluptates accusamus nihil culpa odit vitae. </p> </div> </article> </li> <li class="article-container"> <article> <img src="https://images.unsplash.com/photo-1635351235165-23b8cd066ea6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjIwMjN8&ixlib=rb-4.0.3&q=80&w=400" alt="Flooded city street" /> <div> <h3> How climate change affects extreme weather around the world </h3> <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut illo, possimus voluptates accusamus nihil culpa odit vitae. </p> </div> </article> </li> <li class="article-container" style="--featured: true"> <article> <img src="https://images.unsplash.com/photo-1413882353314-73389f63b6fd?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTg3NjE3NjR8&ixlib=rb-4.0.3&q=80&w=400" alt="Electricity pylons" /> <div> <h3> How ‘Shared Socioeconomic Pathways' explore future climate change </h3> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</p> </div> </article> </li> </ul> </aside> </div> </div> *,
*::before,
*::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: whitesmoke; font-family: Montserrat, sans-serif; line-height: 1.3; } img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } ul { list-style: none; padding: 0; margin: 0; } h2 { padding-bottom: 0.2em; margin: 0 0 0.6em; border-bottom: 2px solid; } article * { margin: 0; } aside { background: #f5f8ff; padding: var(--gap); } .wrapper { max-width: 1650px; margin: 0 auto; padding: clamp(1rem, 10cqi, 3rem); background: white; } h3 { font-size: 1.3em; margin-bottom: 0.2em; line-height: 1.24; } .wrapper-container { container: wrapper / inline-size; } .wrapper { --gap: clamp(1rem, 5cqi, 2rem); display: grid; gap: var(--gap); } @container wrapper (min-width: 1250px) { .wrapper { grid-template-columns: 4fr 1fr; } } .grid-container { container: layout / inline-size; } .grid { display: grid; gap: var(--gap); margin-top: var(--gap); } @container layout (inline-size > 800px) { .grid { grid-template-columns: repeat(2, 1fr); } .article-container:first-child { grid-column: span 2; } } @container layout (inline-size > 1000px) { .grid { grid-template-columns: repeat(4, 1fr); } .article-container:first-child { grid-column: span 4; } .article-container:nth-child(2), .article-container:nth-child(3) { grid-column: span 2; } } .article-container { container: article / inline-size; } article { display: grid; gap: calc(var(--gap) * 0.6); font-size: clamp(0.9rem, 3cqi, 1.75rem); } @container style(--featured: true) { article { position: relative; overflow: hidden; border-radius: 0.2rem; background: #e1e7f5; padding: calc(var(--gap) * 0.8); } article::before { content: ""; width: 2.75rem; aspect-ratio: 1; position: absolute; top: -0.35rem; left: -0.35rem; border-radius: 50%; background-color: #7e9bde; background-position: center; background-size: 70%; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg baseProfile='tiny' height='24px' id='Layer_1' version='1.2' viewBox='0 0 24 24' width='24px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg%3E%3Cg%3E%3Cpath d='M9.362,9.158c0,0-3.16,0.35-5.268,0.584c-0.19,0.023-0.358,0.15-0.421,0.343s0,0.394,0.14,0.521 c1.566,1.429,3.919,3.569,3.919,3.569c-0.002,0-0.646,3.113-1.074,5.19c-0.036,0.188,0.032,0.387,0.196,0.506 c0.163,0.119,0.373,0.121,0.538,0.028c1.844-1.048,4.606-2.624,4.606-2.624s2.763,1.576,4.604,2.625 c0.168,0.092,0.378,0.09,0.541-0.029c0.164-0.119,0.232-0.318,0.195-0.505c-0.428-2.078-1.071-5.191-1.071-5.191 s2.353-2.14,3.919-3.566c0.14-0.131,0.202-0.332,0.14-0.524s-0.23-0.319-0.42-0.341c-2.108-0.236-5.269-0.586-5.269-0.586 s-1.31-2.898-2.183-4.83c-0.082-0.173-0.254-0.294-0.456-0.294s-0.375,0.122-0.453,0.294C10.671,6.26,9.362,9.158,9.362,9.158z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } } @container article (inline-size > 500px) { article { grid-template-columns: 1fr 2fr; } } @container article (inline-size > 800px) { article { grid-template-columns: 1fr 1fr; gap: var(--gap); } } Check out the full demo here that combines all of the examples used in this article:
