![](/container-queries/img/brownies.jpg)
Best Homemade Brownies
The BEST brownie recipe! With crispy edges, fudgy middles, and rich chocolate flavor.
In addition to container queries, we have query units. In the following demo, we have a video play button that dynamically changes its size based on the container width.
Keep in mind that it’s totally fine to use the same container name for different containers.
.hero {
container: play-button / inline-size;
}
.card {
container: play-button / inline-size;
}
.play {
/* 14cqw means 14% of the parent width. */
--size: clamp(70px, 14cqw, 130px);
width: var(--size);
height: var(--size);
}
@container play-button (min-width: 600px) {
.play svg {
fill: #fff;
}
}
In this example, I’m using CSS clamp() comparison function to set a minimum, preferred, and a maximum value for the ``—size` variable. The `14cqw` stands for 14% of the parent’s width.
The BEST brownie recipe! With crispy edges, fudgy middles, and rich chocolate flavor.