layout/DSGrid

DSGrid

layout

since 0.1.0

Responsive CSS-style grid wrapper with configurable columns and gap from the spacing token scale.

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

Purpose

Card grids, metrics dashboards, and any 2-column or multi-column layout.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Props

Prop	Type	Default	Description
itemsreq	[Item]	—	Data for the cells. Item must be Identifiable.
columns	Int	2	Number of equal-width columns.
spacing	CGFloat	DSSpacing.md	Gap between cells.
cellreq	@ViewBuilder (Item) -> Cell	—	Builds one cell per item.

Examples

Metrics dashboard

Two-column KPI grid driven by data.

swift

DSGrid(items: viewModel.metrics, columns: 2) { metric in
    DSMetricCard(
        title: metric.title,
        value: metric.value,
        change: metric.change,
        trend: metric.isUp ? .up : .down
    )
}

Related Components

DSStack DSContainer