CSS - @container

The @container at-rule in CSS is a conditional group rule that is useful in applying styles to the content that is in a container.

Overview

The style defined for the containment context is applied, when the condition specified is true.
The evaluation of the condition takes place when the size of the container changes.
container-name can be provided to filter the set of query containers to find a matching query container name. It is case-sensitive and optional.
After a valid query container is found, each container feature in the <container-condition> gets evaluated against that query container.

Syntax

@container <container-condition> {
    <stylesheet> 
}

Possible Values

The @container at-rule can have following values:

<container-condition>: Lists a set of features that get evaluated against the query container, as the size of the container changes.
<stylesheet>: Contains set of CSS declarations.

CSS @container - Logical keywords in container queries

Following logical keywords can be used to define the container condition:

and: used to combine two or more conditions.
or: used to combine two or more conditions.
not: used to negate the condition. Just one condition is permitted per container query and can not be used with the and or or keywords.

Refer the sample examples for more understanding.

@container (width > 200px) and (height > 200px) {
   /* <stylesheet> */
}
   
@container (width > 200px) or (height > 200px) {
   /* <stylesheet> */
}
   
@container not (width < 200px) {
   /* <stylesheet> */
}

CSS @container - Named Containment Contexts

A context that is contained can be named using the container-name property, in the following manner:

.test-container {
   container-name: sidebar; 
   container-type: inline-size;
}

In case you want to use the shorthand container for container: <name> / <type>, follow the syntax like this:

.test-container {
   container: sidebar / inline-size; 
}

CSS @container - Naming Restrictions For container-name

Following conditions are applied to define a <container-name>:

Any valid <custom-ident> can be used in the name.
It should not be equal to default.
The defined name should not be placed in quotes.
The dashed ident specifiying the name of the author in the identifier, such as --container-name, is allowed.
Multiple names separated by a space is permitted.

Example

Here is an example for the @container at-rule.

<html>
<head>
<style>
   * {
      box-sizing: border-box;
   }
   img {
      max-width: 500px;
      height: 400px;
      display: block;
   }

   body {
      font-size: 1.5em;
   }

   .wrapper {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 30px;
   }

   .card {
      background: black;
      color: white;
      border-radius: 40px;
      display: grid;
      max-width:400px;
   }

   .card .image {
      border-radius: 40px;
   }

   .card .content {
      padding: 10px;
   }

   .card h2 {
      margin: 0;
      padding: 10px;
   }

   /* make the two grid items a containment context */
   .first,
   .second{
      container-type: inline-size;
   }

   /* the card is placed as a child of the two grid items, displaying as one or two columns  */
   @container (min-width: 500px) {
      .card {
         grid-template-columns: 1fr 2fr;
         grid-template-rows: auto 1fr;
         align-items: start;
         column-gap: 20px;
         max-width:80%;
      }
   
      .card h2 {
         padding: 0;
         margin: .5em 0 0 0;
      }

      .card header {
         grid-row: 1;
         grid-column: 2;
      }

      .card .image {
         grid-row: 1 /3;
         grid-column: 1;
         height:100%;
      }

      .card .content {
         grid-column: 2;
         grid-row: 2;
         padding: 0 20px 20px 0;
      }
   }
</style>
</head>
<body>
   <div class="wrapper">
   <div class="second">
      <article class="card">
      <header>
         <h2>@container</h2>
      </header>

      <div class="image"><img src="images/red-flower.jpg"></div>

      <div class="content">
         <p>@container rule applied on the card which makes it responsive when size of the container is changed</p>
      </div>
      </article>
   </div>
   <div class="first">
   <article class="card">
      <header>
         <h2>@container</h2>
      </header>

      <div class="image"><img src="images/red-flower.jpg"></div>

      <div class="content">
         <p>@container rule applied on the card which makes it responsive when size of the container is changed</p>
      </div>

   </article>
   </div>
   </div>
</body>
</html>

In the above example:

container-type property is set to inline-size, as the containment should happen on the inline axis.
The container-type property is set on a class called .first class, which makes the container element as queryable container.
.card is contained in the <article> element, on which @container at-rule is applied, hence whenever the containing element's size changes, the card changes.
A breakpoint is created at a min-width of 500px, so when the container is at min-width of 500px, the card looks like as in the example.
As the condition changes, the card will appear differently.

Container queries let us create more powerful and reusable components that can adjust to nearly any layout and container, making the web page more responsive.

Descriptors or related properties

The table given below lists all the descriptors related to @container:

Descriptor / Property	Description
aspect-ratio	Defines the desired width-to-height ratio of an element's box.
block-size	Defines the horizontal or vertical size of an element's block, depending on its writing mode. Relates to the width of the element.
height	Sets the height of the element's box.
inline-size	Defines the horizontal or vertical size of an element's block, depending on its writing mode. Relates to the height of the element.
orientation	Defines the orientation of the viewport.
width	Sets the width of the element's box.