container-type

The CSS container-type property is part of the Container Queries feature used to register an element as a container that can apply styles to other elements when it meets certain conditions.

.parent {
  container-type: inline-size;
}

@container (width < 500px) {
  .child {
    flex-direction: column;
  }
}

Syntax

container-type: normal | size | inline-size;

• Initial value: normal
• Applies to: All elements
• Inherited: No
• Percentages: N/A
• Computed value: As specified by keyword
• Canonical order: Per grammar
• Animation: Not animatable

Values

There are currently three types of containers that we can define in addition to CSS global keyword values:

/* Keyword values */
container-type: normal;
container-type: size;
container-type: inline-size;

/* Global Values */
container-type: inherit;
container-type: initial;
container-type: revert;
container-type: revert-layer;
container-type: unset;

• normal: This indicates that the element is a container that can be queried by its styles rather than size. All elements are technically containers by default, so we don’t even need to explicitly assign a container-type to define a style container.
• size: This is if we want to query a container by its size, whether we’re talking about the inline or block direction.
• inline-size: This allows us to query a container by its inline size, which is equivalent to width in a standard horizontal writing mode. This is perhaps the most commonly used value, as we can establish responsive designs based on element size rather than the size of the viewport as we would normally do with media queries.

The container-name property sometimes requires it

Technically speaking, all elements are containers by default, only they are style containers that cannot be queried by their size. That’s because the container-type property’s default value is normal which ensures that all elements can at least be queried by their styles, even if we do not explicitly set a container-type on it.

If we want to be able to query the element by its size, however, we have to explicitly set a container-type:

.parent {
  container-type: inline-size;
}

We can register any element as a container with the container-type property alone, even if we do not give it a container-name. In this sort of case, any @container query will match the nameless container.

.parent {
  container-type: inline-size;
}

/* This matches the .parent container */
@container (width > 800px) {
  article {
    display: flex;
  }
}

That said, we absolutely need to provide a container-name if we want to query a specific container. And if we want to query that specific container by it’s size or inline-size, then we have to bring the container-type property along for the ride:

.parent {
  container-name: cards-grid;
  container-type: inline-size;
}

/* This matches the .parent container */
@container cards-grid (width > 800px) {
  article {
    display: flex;
  }
}

But if we only want to query the element’s style, then there’s no need to declare either property since all elements are style queries by default, thanks to container-type: normal being the default value.

It’s included in the container shorthand property

We can avoid having to declare both container-type and container-name separately by using the container shorthand property, which combines the two into a single declaration.

.parent {
  container: cards-grid / inline-size;

  /* Equivalent to: */
  container-name: cards-grid;
  container-type: inline-size;
}

Specification

The container-type property is defined in the CSS Containment Module Level 3 specification, which is currently in Editor’s Draft status at the time of this writing.

Browser support

More on Container Queries

Related