CSS Container Queries
What is a CSS Container Query?
Container queries allow us to control layout changes based on the size of a parent element, rather than the entire viewport.
Traditional CSS media queries do not allow elements to adapt based on their parent containers. To overcome this limitation, CSS container queries were introduced. As of 2023, they are supported by all major modern browsers.
Container-Based Responsiveness
Set container-type: inline-size; on a parent element to enable @container queries. It works similarly to CSS media queries but responds to the container’s size instead of the viewport.
CSS:
.container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
background: #fbeed7;
}
}
HTML:
<div class="container">
<div class="card">
<h2 class="name">Alice Smith</h2>
</div>
<div class="card">
<h2 class="name">Bob Johnson</h2>
</div>
</div>
Example: Card Layout
With container queries, we gain finer control over layout responsiveness. In this example, the card adjusts its layout based on the width of its parent container.
At 978px width:
At 855px width:
At 680px width:
At 417px width:
Full Example Source
<style>
.container {
container-type: inline-size;
border: 2px solid #ccc;
padding: 1rem;
}
.card {
background: #f0f0f0;
padding-top: 2.5rem;
padding-bottom: 1rem;
padding-inline: 1rem;
margin-top: 3rem;
margin-right: 0;
margin-bottom: 0.5rem;
margin-left: 0;
font-size: 1rem;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
border-radius: 12px;
text-align: center;
position: relative;
overflow: visible;
}
.avatar-wrapper {
position: absolute;
top: -30px;
background: #fff;
border-radius: 50%;
padding: 3px;
box-shadow: 0 0 0 2px #ccc;
}
.avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
display: block;
}
.info {
display: flex;
flex-direction: column;
gap: 0.5rem;
width: 100%;
align-items: center;
}
.name {
font-weight: bold;
font-size: 1.3em;
color: #333;
flex-basis: 33%;
}
.detail {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.9em;
color: #666;
}
.settings {
font-size: 1.5rem;
color: #666;
cursor: pointer;
align-self: flex-end;
margin-top: 0.5rem;
display: none;
}
@container (min-width: 400px) {
.card {
background: #fbeed7;
margin-top: 0.5rem;
font-size: 1.1rem;
flex-direction: row;
align-items: center;
text-align: left;
padding-top: 1rem;
}
.avatar-wrapper {
position: static;
margin-top: 0;
box-shadow: none;
background: none;
padding: 0;
}
.name {
font-size: 1.1rem;
}
.info {
flex-direction: row;
flex: 1;
}
.settings {
display: block;
margin-top: 0;
margin-left: auto;
align-self: center;
}
}
.wrapper {
display: flex;
gap: 2rem;
flex-wrap: wrap;
padding: 1rem;
}
.container {
flex: 1 1 300px;
}
</style>
<div class="wrapper">
<div class="container">
<div class="card">
<div class="avatar-wrapper">
<img class="avatar" src="https://picsum.photos/60?random=1" alt="Avatar A1" />
</div>
<div class="info">
<div class="name">Alice Smith</div>
<div class="detail">
<div class="email">[email protected]</div>
<div class="department">Marketing</div>
</div>
<div class="settings">⋮</div>
</div>
</div>
<div class="card">
<div class="avatar-wrapper">
<img class="avatar" src="https://picsum.photos/60?random=2" alt="Avatar A2" />
</div>
<div class="info">
<div class="name">Bob Johnson</div>
<div class="detail">
<div class="email">[email protected]</div>
<div class="department">Sales</div>
</div>
<div class="settings">⋮</div>
</div>
</div>
</div>
<div class="container">
<div class="card">
<div class="avatar-wrapper">
<img class="avatar" src="https://picsum.photos/60?random=3" alt="Avatar B1" />
</div>
<div class="info">
<div class="name">Charlie Rose</div>
<div class="detail">
<div class="email">[email protected]</div>
<div class="department">Engineering</div>
</div>
<div class="settings">⋮</div>
</div>
</div>
<div class="card">
<div class="avatar-wrapper">
<img class="avatar" src="https://picsum.photos/60?random=4" alt="Avatar B2" />
</div>
<div class="info">
<div class="name">Dana White</div>
<div class="detail">
<div class="email">[email protected]</div>
<div class="department">HR</div>
</div>
<div class="settings">⋮</div>
</div>
</div>
</div>
</div>
Tiny Performance Boost
Setting contain: inline-size; on a container isolates its subtree from the rest of the DOM, creating a new formatting context. This instructs the browser to exclude that subtree from global layout recalculations, improving performance. CSS container queries rely on this behavior to evaluate styles based on a container’s size rather than the viewport, making layout updates more efficient and localized.
Tailwind Support
To use container queries with Tailwind CSS, we have to install the @tailwindcss/container-queries plugin.
https://github.com/tailwindlabs/tailwindcss-container-queries