CSS container-type Property

Description

The container-type property controls whether an element establishes a CSS container for use by container queries and determines how that container's size is measured for those queries. When an element becomes a container, descendant rules written with @container are matched against the container's measured dimensions rather than the viewport or other ancestors. This allows components to adapt their styling based on the size of the element that actually contains them, enabling truly modular, composition-friendly responsive design.

Setting container-type affects how the UA computes the "query box" used by container queries — that is, which axis or dimensions are observed to decide whether a query condition is met. It therefore changes when and how descendant styles change in response to layout changes of the container element. While related, this is conceptually distinct from the containment behaviors controlled by the contain property; container-type specifically enables the element to act as a target for @container queries and to expose its measured size to those queries, whereas contain controls what layout, style, and paint information is isolated for rendering and performance.

You commonly use container-type alongside the container registration properties to make queries more explicit and targeted: the shorthand container can set both the name and the type of a container at once, and container-name lets you reference a specific container when multiple potential containers exist. In practice, pick a stable wrapper element to become a container so you avoid frequent relayouts, and be mindful that enabling container behavior can affect layout passes — it helps decouple component layout from the viewport, but it also introduces a point where the UA must track and re-evaluate styles when that container’s measured dimensions change.

Definition

Initial value: normal
Applies to: all elements
Inherited: no
Computed value: as specified
Animatable: a color
JavaScript syntax: object.style.containerType

Syntax

container-type: size | inline-size | normal

Values

sizeEstablishes a query container for container size queries on both the inline and block axis in both the inline and block dimensions. Applies layout containment, style containment, and size containment to the container.
inline-sizeEstablishes a query container for dimensional queries on the inline axis of the container. Applies layout, style, and inline-size containment to the element.
normalThe element is not a query container for any container size queries, but remains a query container for container style queries.

Example

HTML

<div class='gallery'>

  <article class='card'>

    <div class='card-image' aria-hidden='true'></div>

    <div class='card-content'>

      <h3 class='card-title'>Cozy Cabin Retreat</h3>

      <p class='card-body'>A quiet cabin in the woods with modern amenities and scenic views.</p>

    </div>

  </article>



  <article class='card'>

    <div class='card-image' aria-hidden='true'></div>

    <div class='card-content'>

      <h3 class='card-title'>City Loft</h3>

      <p class='card-body'>Modern loft in the heart of the city, close to shops and nightlife.</p>

    </div>

  </article>



  <article class='card'>

    <div class='card-image' aria-hidden='true'></div>

    <div class='card-content'>

      <h3 class='card-title'>Beach House</h3>

      <p class='card-body'>Sunny beachfront property with panoramic ocean views.</p>

    </div>

  </article>

</div>

CSS

/* Base reset */
* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  margin: 0;
  padding: 2rem;
  background: #f6f8fb;
  color: #111827;
}

/* Responsive grid layout for cards */
.gallery {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* Card acts as a query container */
.card {
  container-type: inline-size;
  container-name: demo-card;

  background: #ffffff;
  border: 1px solid #e6e9ef;
  border-radius: 10px;
  padding: 1rem;

  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  align-items: center;

  box-shadow: 0 1px 2px rgba(16,24,40,0.03);
}

.card-image {
  background: linear-gradient(135deg, #cfe9ff 0%, #b8defd 100%);
  border-radius: 8px;
  width: 100%;
  height: 160px;
}

.card-title {
  margin: 0 0 0.25rem 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.card-body {
  margin: 0;
  color: #475569;
  font-size: 0.95rem;
}

/* Container query: when the card's inline size is at least 28rem, switch to a horizontal layout */
@container demo-card (min-width: 28rem) {
  .card {
    grid-template-columns: 160px 1fr;
  }

  .card-image {
    height: 160px;
  }

  .card-title {
    font-size: 1.125rem;
  }
}

/* Smaller container adjustments */
@container demo-card (max-width: 24rem) {
  .card {
    padding: 0.75rem;
  }

  .card-image {
    height: 120px;
  }
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS container-type property. Hover over a browser icon to see the version that first introduced support for this CSS property.