Defining Container Queries

Learn the syntax for creating container queries.

Container query implementation and styling syntax

The first step is to designate that an element is a container by using the container-type property. The most fundamental and currently best-supported value is inline-size, which in a horizontal writing mode, equates to the element’s width. So this definition means that we intend to support a query based on the .container element’s inline size:

Get hands-on with 1200+ tech skills courses.