Layout
Col
A 12-column grid cell with per-breakpoint spans. `offset` works here — in v0 it emitted `ml-${n}/12`, which is not valid Tailwind, so it and all four `*Offset` props were silently no-ops.
data-scope="col"
Usage
<Col span={12} md={{ span: 6 }} lg={{ span: 4, offset: 1 }}>
cell
</Col><Col :span="12" :md="{ span: 6 }" :lg="{ span: 4, offset: 1 }">cell</Col><Col span={12} md={{ span: 6 }} lg={{ span: 4, offset: 1 }}>cell</Col><ck-col [span]="12" [md]="{ span: 6 }" [lg]="{ span: 4, offset: 1 }">
cell
</ck-col>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
span | 1–12 | — | Columns occupied at every breakpoint. |
offset | 1–11 | — | Columns skipped before the cell. |
sm | md | lg | xl | { span?, offset? } | — | Per-breakpoint overrides. |
order | number | "first" | "last" | — | Visual order. Written as --ck-col-order inline. |
Prop names are identical in all four frameworks. Only two-way binding differs, and each framework uses its own idiom over the same underlying prop.
Migrating from react-ui-toolkit
| v0 | v1 | Notes |
|---|---|---|
offset / smOffset / mdOffset / lgOffset | offset, and { offset } inside each breakpoint object | These are newly functional — they never did anything in v0. |