With @create-container <sizes>;
you can define that a specific selector acts as a main container on your page (e.g. sidebar, content, header). As <sizes>
you set the size of this container as it will be in the rendered page, the syntax is the same as for the sizes
attribute for images.
With @container (<query>) {}
you can query against the size of the containers instead of the viewport. These queries will be translated to media queries with the container classes added.
- Doesn’t require a JavaScript runtime
- Containers should not be nested. If you nest them you have to define a container size for every nesting combination that can appear on your site. But it can still result in conflicting styles.
- You should not define too much containers as the size of the resulting CSS code grows with every container.
.wrap1 {
@create-container calc(50vw - 20px);
width: 50%;
padding: 10px;
}
.wrap2 {
@create-container 33vw;
width: 33%;
}
.wrap1 .wrap2 {
@create-container {
sizes: calc(50vw - 20px);
};
width: 100%;
}
@container (min-width: 200px) {
.component {
float: left;
}
}
.wrap1 {
width: 50%;
padding: 10px;
}
.wrap2 {
width: 33%;
}
.wrap1 .wrap2 {
width: 100%;
}
@media (min-width: 440px) {
.wrap1 .component,
.wrap1 .wrap2 .component {
float: left;
}
}
@media (min-width: 606px) {
.wrap2 .component {
float: left;
}
}