# gpui: Add container_query element \(\#60774\) · gitcafe/zed

[View on GitCafe](https://git.cafe/gitcafe/zed/commit/49ad06c1b4047b018b1622e1cf94cafcacd39247)

Repository: [gitcafe/zed](https://git.cafe/gitcafe/zed)

Visibility: public

Requested revision: 49ad06c1b4047b018b1622e1cf94cafcacd39247

Requested commit: 49ad06c1b4047b018b1622e1cf94cafcacd39247

Commit: 49ad06c1b4047b018b1622e1cf94cafcacd39247

Tree: adb2f16dbdf384bb779dcb2b3b404352c086e9b3

Author: Mikayla Maki

Committer: GitHub

## Message

````
gpui: Add container_query element (#60774)

Adds a `container_query` element to GPUI, in the spirit of CSS container
queries: the element's own size is determined solely by its style and
the space offered by its parent, and once that size is known the
provided closure is called with the measured size to build the contents.

```rust
container_query(|size, _window, _cx| {
    if size.width < px(240.) {
        div().child("Narrow layout")
    } else {
        div().child("Wide layout")
    }
});
```

Implementation notes:

- Defaults to filling its parent (`size_full()` semantics), overridable
via `Styled` since contents can't influence the container's size (the
same constraint CSS container queries impose).
- Reworks the `grid_layout` example (the Holy Grail layout) to
demonstrate it: the three-column grid collapses to a stacked column when
the window is narrower than 400px, and the header shows the live
measured width.

Release Notes:

- N/A

---------

Co-authored-by: zed-zippy[bot] <234243425+zed-zippy[bot]@users.noreply.github.com>
````

## Parents

- [b0da438545633412d6792796b3d92337ea44146d](https://git.cafe/gitcafe/zed/commit/b0da438545633412d6792796b3d92337ea44146d?format=markdown)

[Source at this commit](https://git.cafe/gitcafe/zed/tree/49ad06c1b4047b018b1622e1cf94cafcacd39247?format=markdown)