layout/DSGrid
DSGrid
layoutResponsive CSS-style grid wrapper with configurable columns and gap from the spacing token scale.
iOS 17+macOS 14+
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 |
|---|---|---|---|
| columns | Int | 2 | Number of equal-width columns. |
| spacing | CGFloat | DSSpacing.md | Gap between cells. |
| contentreq | ViewBuilder | — | Grid cells. |
Examples
Metrics dashboard
2-column KPI grid.
swift
DSGrid(columns: 2, spacing: DSSpacing.md) {
DSMetricCard(title: "Revenue", value: "$48K", change: 0.12, data: data)
DSMetricCard(title: "Users", value: "2,847", change: -0.04, data: data)
}