# `PhiaUi.Components.Layout.ContainerQuery`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/layout/container_query.ex#L1)

Container query wrapper component.

Wraps children with CSS `@container` so descendant elements can use container
query breakpoints (`@sm:`, `@md:`, `@lg:`, etc.) in their Tailwind classes.

In Tailwind CSS v4, the `@container` utility class automatically sets
`container-type: inline-size`. Named containers use `@container/{name}`.
For `size` containment (both axes), an inline style is applied.

## Examples

    <%!-- Basic container query context --%>
    <.container_query_wrap>
      <div class="@md:flex @md:gap-4">
        <p>Responds to container width, not viewport.</p>
      </div>
    </.container_query_wrap>

    <%!-- Named container for targeted queries --%>
    <.container_query_wrap name="sidebar">
      <nav class="@sm/sidebar:flex-col @lg/sidebar:flex-row">
        ...
      </nav>
    </.container_query_wrap>

    <%!-- Size containment (both inline and block axes) --%>
    <.container_query_wrap type={:size}>
      <div class="@md:grid @md:grid-cols-2">
        ...
      </div>
    </.container_query_wrap>

# `container_query_wrap`

Renders a container query wrapper.
## Attributes

* `name` (`:string`) - Optional container name for named queries (`@container/name`). Defaults to `nil`.
* `type` (`:atom`) - Containment type: `:inline_size` (width only) or `:size` (both axes). Defaults to `:inline_size`. Must be one of `:inline_size`, or `:size`.
* `class` (`:string`) - Additional CSS classes merged via cn/1. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the root element.
## Slots

* `inner_block` (required) - Content that can use container query breakpoints.

---

*Consult [api-reference.md](api-reference.md) for complete listing*