Container Query

Apply styles to an element based on certain attributes of its container.

Panda

import { Cq } from "styled-system/jsx"

Usage

The Cq component is used to apply styles based on the width of the container. This is a useful alternative to media queries which are based on the width of the browser viewport.

Cq provides two utility props:

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.

The container query size conditions use the following syntax: @/[size] or @[custom-name]/[size]

Name

The name prop is used to define the name of the container query. This must be defined in the Panda config in order to use it on the Cq component.

Once "registered", the name prop can be used to add container-specific boundaries and styles.

Step 1: Register container names and sizes

export default createCerberusConfig({
    // ...
    theme: {
      extend: {
        containerNames: ['sidebar', 'content'],
        containerSizes: {
          xs: '40em',
          sm: '60em',
          md: '80em'
        }
      }
    }
  })

Step 2: Use `Cq` to apply container query styles

import { Box, Cq } from 'styled-system/jsx'

  export function UsageDemo() {
    return (
      <Cq name="sidebar">
        <Box
          fontSize={{
            base: 'lg',
            '@sidebar/sm': 'md',
          }}
        />
      </Cq>
    )
  }

Type

The type prop is used to define the type of the container query. Defaults to inline-size.

Guide

Default Sizes

The following sizes are included with Cerberus by default:

{
  xs: '320px',
  sm: '384px',
  md: '448px',
  lg: '512px',
  xl: '576px',
  '2xl': '672px',
  '3xl': '768px',
  '4xl': '896px',
  '5xl': '1024px',
  '6xl': '1152px',
  '7xl': '1280px',
  '8xl': '1440px'
}

Props

The Cq component supports all CSS properties as props, making it easy to style elements.

On this page