Container Queries

Container queries are an alternative to media queries, but unlike media queries, where you target the viewport size to change the style of an element, with container queries, you can target an element's container size instead.

Container Query Pattern (cq)

The cq function accepts the following properties:

• name: The name of the container query, Maps to the containerName CSS property.
• type: The type of the container query. Maps to the containerType CSS property. Defaults to inline-size.

import { cq } from 'styled-system/patterns'

function Demo() {
  return (
    <nav className={cq()}>
      <div
        className={css({
          fontSize: { base: 'lg', '@/sm': 'md' },
        })}
      />
    </nav>
  )
}