Skip to content

DashboardGrid

Responsive grid layout for dashboards with consistent spacing and card sizing.

Quick Start

Live Preview
Revenue: $12k
Users: 2,410
Trials: 312
from faststrap import DashboardGrid, StatCard

DashboardGrid(
    StatCard("Revenue", "$12k"),
    StatCard("Users", "2,410"),
    cols=3,
    gap=1.5,
)

Auto Fit

When cols is not provided, the grid uses auto-fit sizing based on min_card_width.

DashboardGrid(
    *cards,
    min_card_width=280,
)

Dense Packing

DashboardGrid(*cards, dense=True)

API Reference

faststrap.components.layout.dashboard_grid.DashboardGrid(*children, cols=None, gap=1.5, min_card_width=240, dense=False, **kwargs)

Responsive dashboard grid using CSS grid.

Source code in src/faststrap/components/layout/dashboard_grid.py 
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
@register(category="layout")
@beta
def DashboardGrid(
    *children: Any,
    cols: int | None = None,
    gap: str | int | float = 1.5,
    min_card_width: str | int | float = 240,
    dense: bool = False,
    **kwargs: Any,
) -> Div:
    """Responsive dashboard grid using CSS grid."""
    cfg = resolve_defaults(
        "DashboardGrid",
        cols=cols,
        gap=gap,
        min_card_width=min_card_width,
        dense=dense,
    )
    c_cols = cfg.get("cols", cols)
    c_gap = cfg.get("gap", gap)
    c_min_card_width = cfg.get("min_card_width", min_card_width)
    c_dense = cfg.get("dense", dense)

    if c_cols is not None and c_cols < 1:
        msg = f"cols must be >= 1, got {c_cols}"
        raise ValueError(msg)

    style: dict[str, Any] = {
        "display": "grid",
        "gap": _normalize_size(c_gap),
    }

    if c_cols:
        style["grid_template_columns"] = f"repeat({c_cols}, minmax(0, 1fr))"
    else:
        style["grid_template_columns"] = (
            f"repeat(auto-fit, minmax({_normalize_px(c_min_card_width)}, 1fr))"
        )

    if c_dense:
        style["grid_auto_flow"] = "dense"

    user_style = kwargs.pop("style", None)
    if isinstance(user_style, dict):
        style.update(user_style)

    user_cls = kwargs.pop("cls", "")
    wrapper_cls = merge_classes("faststrap-dashboard-grid", user_cls)

    kwargs["style"] = style

    attrs: dict[str, Any] = {"cls": wrapper_cls}
    attrs.update(convert_attrs(kwargs))

    if isinstance(user_style, str) and user_style:
        attrs["style"] = f"{attrs.get('style', '')}; {user_style}".strip("; ")

    return Div(*children, **attrs)