🔥 HOT: Docs/Web/CSS/CSS containment/Container queries - High Quality

  1. Web
  2. CSS
  3. Guides
  4. Containment
  5. Container queries

CSS container queries

Container queries enable you to apply styles to an element based on certain attributes of its container:

  • The container's size.
  • Styles applied to the container.
  • The container's scroll-state or that of its scrolling ancestor.

Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics.

This article provides an introduction to using container queries, specifically focusing on size container queries. Other guides discuss style and scroll-state container queries in detail.

Two different query types. First, a media query based on the viewport's width, which is the full width of the browser. Second, a container query based on the width of a container element.

Using container size queries

While container queries apply styles based on the container type, container size queries apply styles specifically based on the container's dimensions. To use container size queries, you need to declare a containment context on an element so that the browser knows you might want to query the dimensions of this container later. To do this, use the container-type property with a value of size, inline-size, or normal.