Grid builder

A measured, token-guttered grid that retains caller item order.

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

use gpui_kit::layout::Grid;

Reviewed in grid.

Construct

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

Options

Chain onto the value.

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

Example · grid

fn grid(_window: &mut Window, cx: &mut App) -> AnyElement {
    let theme = cx.theme().clone();
    let item = |id: &'static str, label: &'static str| {
        GridItem::new(
            id,
            Card::new()
                .id(format!("scene.grid.card.{id}"))
                .padding(Space::Md)
                .child(crate::foundation::text(&theme, TypeScale::Label, label))
                .child(caption(&theme, "Caller-owned content")),
        )
        .span_at(Breakpoint::Large, if id == "summary" { 2 } else { 1 })
    };
    stack(&theme)
        .w(px(840.0))
        .child(caption(
            &theme,
            "Columns and spans resolve from the grid's measured width while semantic order stays source order",
        ))
        .child(
            Grid::new("scene.grid")
                .columns(1)
                .columns_at(Breakpoint::Medium, 2)
                .columns_at(Breakpoint::Large, 3)
                .gap(Space::Sm)
                .items([
                    item("summary", "Summary"),
                    item("settings", "Settings"),
                    item("history", "History"),
                    item("policy", "Policy"),
                ]),
        )
        .into_any_element()
}

Source: crates/gpui-kit/src/layout/grid.rs