> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cskn.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Layout

> Overflow-safe flex and grid primitives, and responsive helpers.

Use these instead of hand-written flex and grid. Each one is built so content cannot push the layout wider than the screen, which is the usual cause of cards spilling off the side on mobile.

```tsx theme={null}
import { Stack, Row, Grid, Spacer } from '@cskn/ui';

<Stack gap={16}>
  <Row gap={12} align="center">
    <Title />
    <Spacer />
    <Actions />
  </Row>

  <Grid cols={4} gap={12}>{stats}</Grid>
  <Grid min={160} gap={16}>{cards}</Grid>
</Stack>
```

## Stack

A vertical flex column with `min-width: 0`, so long or non-wrapping content shrinks instead of overflowing.

<ParamField path="gap" type="number | string">Space between children.</ParamField>
<ParamField path="align / justify" type="CSS value">`align-items` and `justify-content`.</ParamField>

## Row

A horizontal flex row with `min-width: 0`.

<ParamField path="gap" type="number | string">Space between children.</ParamField>
<ParamField path="align / justify" type="CSS value">`align-items` and `justify-content`.</ParamField>
<ParamField path="wrap" type="boolean">Allow wrapping onto several lines.</ParamField>

`Spacer` takes up the remaining space in a `Row` or `Stack`. Give it `size` for a fixed gap instead.

## Grid

<ParamField path="cols" type="number">
  A fixed number of equal columns that can shrink below their content: `repeat(cols, minmax(0, 1fr))`.
</ParamField>

<ParamField path="min" type="number">
  A responsive card grid: columns at least `min` px wide when there is room, collapsing to one column on narrow screens. Ignored when `cols` is set.
</ParamField>

<ParamField path="gap / rowGap / colGap" type="number | string">Gaps.</ParamField>

<Note>
  Why this matters: a plain `display: grid` without explicit columns can grow to a child's max-content width, and `1fr` means `minmax(auto, 1fr)`, which will not shrink below its content. `Grid` pins its tracks to `minmax(0, …)` in both modes. `UIProvider` also caps `img`, `svg`, `video` and `iframe` at `max-width: 100%`. Add `overflow-x: hidden` to your app root as well.
</Note>

## Responsive

Breakpoints: `sm` 640, `md` 768, `lg` 1024, `xl` 1280.

```tsx theme={null}
import { useBreakpoint, useMediaQuery, Show, Hide } from '@cskn/ui';

const bp = useBreakpoint();
return bp.lg ? <Sidebar /> : <TabBar />;

<Show above="lg"><Sidebar /></Show>
<Show below="lg"><TabBar /></Show>

const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
```

<ResponseField name="useBreakpoint()" type="BreakpointState">
  `{ width, sm, md, lg, xl, active, min(bp), max(bp) }`. Each boolean is true when the viewport is at least that wide; `active` is the largest match, or `'base'`.
</ResponseField>

`Show` mounts its children only above (at least) or below (narrower than) a breakpoint; combine both for a range. `Hide` is the inverse. Both decide on the client, so a hidden subtree is not mounted at all. `breakpoints` exports the pixel values.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.