Given the following HTML example which is a card component with an image, a title, and some text:
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
The explicit way to create a container context is to declare a container-type
with an optional container-name
:
.post {
container-type: inline-size;
container-name: sidebar;
}
The container
shorthand is intended to make this simpler to define in a single declaration:
.post {
container: sidebar / inline-size;
}
You can then target that container by name using the @container
at-rule:
@container sidebar (min-width: 400px) {
}