Basic examples
Using pre-determined utility classes to change state/style at a particular width via the parent container.
The example shows at breakpoint 2 (582px) 2 grid rows changing to 2 columns. Use the resizer to see this in action.
Creating containers
Create container queries by using the @container on the parent, and either creating a custom container query in CSS, or using a pre-determined framework class.
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Note:
Container queries don`t yet allow custom media queries to be used, so for the time being use explicit values to set breakpoints.
i.e: @container (min-width: 582px) and not @container (min-width: --from-bp2).