Masonry builder

A measured masonry layout over caller-owned content.

A builder is RenderOnce. Construct and mount it in one expression.

The verified masonry scene in studio-dark

use gpui_kit::data::Masonry;

Reviewed in masonry.

Construct

new(ident: impl Into<Ident>) -> Self

Options

Chain onto the value.

items(items: impl IntoIterator<Item = MasonryItem>) -> Self
columns(columns: usize) -> Self
columns_at(breakpoint: Breakpoint, columns: usize) -> Self
gap(gap: Space) -> Self

Example · masonry

fn masonry(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    let cards = [
        ("short", "Short result", 72.0),
        ("medium", "A result with a little more detail", 124.0),
        (
            "tall",
            "A result whose caller-measured content is taller",
            184.0,
        ),
        ("another", "Another result", 96.0),
        ("last", "The final result", 140.0),
    ];
    stack(&theme)
        .w(px(640.0))
        .child(caption(
            &theme,
            "Column placement uses caller-measured heights and reflows at measured container breakpoints",
        ))
        .child(
            Masonry::new("scene.masonry")
                .columns(2)
                .columns_at(Breakpoint::Medium, 3)
                .gap(Space::Sm)
                .items(cards.into_iter().map(|(id, label, height)| {
                    MasonryItem::new(
                        id,
                        Card::new()
                            .id(format!("scene.masonry.card.{id}"))
                            .padding(Space::Md)
                            .child(crate::foundation::text(&theme, TypeScale::Label, label)),
                        height,
                    )
                })),
        )
        .into_any_element()
}

Source: crates/gpui-kit/src/data/masonry.rs