---
title: "ref.at()"
description: "Style an element with a container query on the element that has a ref."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# ref.at()

`card.at(query?)` creates a container query on the container that the `card` ref
names. Make that element a container with
[`card.asContainer()`](/docs/macros/ref/as-container).

## Example

### Source

```tsx
import { style } from "stillwind/react";

const card = style.ref("card");
export const container = style(card, card.asContainer("inline-size"));
export const child = style({ [card.at("width >= 40rem")]: "grid-cols-2" });
```

### Compiled code

```ts
const card = undefined;
export const container = {className:"sw_28iqw sw_card_uryy0"};
export const child = {className:"sw_cunr1"};
```

### Generated CSS


```css
.sw_28iqw:where(.sw_card_uryy0) {
  container-name: sw-c-card-uryy0;
  container-type: inline-size;
}

@container sw-c-card-uryy0 (width >= 40rem) {
  .sw_cunr1 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
```

## Inputs

| Form                         | Generated condition                  |
| ---------------------------- | ------------------------------------ |
| `card.at("width >= 40rem")`  | `@container <name> (width >= 40rem)` |
| ``card.at`width >= 40rem` `` | The same as the string form          |
| `card.at()` or `card.at("")` | `@container <name>`                  |

Write the query as a string literal or a tagged template without interpolations.
Leave out the outer parentheses.

## Behavior

Without a query, the condition matches whenever the styled element is inside a
container with the name.

Write the call directly as a computed key in `style()`. You cannot store it in a
variable and use it later.

See [Element relationships](/docs/guides/element-relationships#react-to-a-containers-size)
for a task-based example.

Source: https://stillwind.dev/docs/macros/ref/at/index.mdx