Layout

Row

A flex row with a 12-column grid inside. `spacing` is unbounded, so it ships as an inline custom property rather than a data attribute — see the CSP note below.

data-scope="row"

Usage

ReactVueSvelteAngular

import { Row, Col } from "@crosskit-ui/react";

<Row spacing={4}>
  <Col span={8}>main</Col>
  <Col span={4}>aside</Col>
</Row>

<script setup lang="ts">
import { Row, Col } from "@crosskit-ui/vue";
</script>

<template>
  <Row :spacing="4">
    <Col :span="8">main</Col>
    <Col :span="4">aside</Col>
  </Row>
</template>

<script lang="ts">
  import { Row, Col } from "@crosskit-ui/svelte";
</script>

<Row spacing={4}>
  <Col span={8}>main</Col>
  <Col span={4}>aside</Col>
</Row>

import { CkRow, CkCol } from "@crosskit-ui/angular";

@Component({
  imports: [CkRow, CkCol],
  template: `
    <ck-row [spacing]="4">
      <ck-col [span]="8">main</ck-col>
      <ck-col [span]="4">aside</ck-col>
    </ck-row>
  `,
})
export class Demo {}

Props

Prop	Type	Default	Notes
`justify`	"start" \| "center" \| "end" \| "between" \| "around" \| "evenly"	`"start"`	Main-axis distribution.
`align`	"start" \| "center" \| "end" \| "stretch" \| "baseline"	`"stretch"`	Cross-axis alignment.
`spacing`	number	`0`	Gutter in 0.25rem steps. Written as --ck-row-spacing inline; a strict CSP needs style-src-attr 'unsafe-inline'.
`wrap`	boolean	`true`	Allow wrapping.
`reverse`	boolean	`false`	Reverse the order.

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
`gap-${spacing} class`	`--ck-row-spacing custom property`	The old dynamic class name only ever worked inside this repo's own Tailwind build.