# Stack

Lays out children in a column or a row with even spacing from the gap scale. Use it for most one-dimensional layouts; for columns that align across rows, use [Grid](/components/grid.md).

```tsx
// demo.tsx
import {Stack, Text} from '@earendil-works/elanor-react';

import styles from './stack.module.css';

export default function StackDemo() {
  return (
    <Stack>
      <Text className={styles.item}>Draft</Text>
      <Text className={styles.item}>In review</Text>
      <Text className={styles.item}>Published</Text>
    </Stack>
  );
}
```

```css
/* stack.module.css */
.item {
  padding: var(--semantic-dimension-space-padding-small);
  border-radius: var(--semantic-dimension-radius-small);
  background: var(--semantic-color-background-fill-secondary);
}
```

## Usage

```tsx
import {Stack} from '@earendil-works/elanor-react';

<Stack gap="small">{/* Children */}</Stack>;
```

Stack renders a flex `div`. It defaults to a column with `medium` gap and aligns children to the start of the cross axis.

## Row

`direction="row"` lays children out horizontally. Add `wrap="wrap"` so they wrap instead of overflowing.

```tsx
// row.tsx
import {Stack, Text} from '@earendil-works/elanor-react';

import styles from './stack.module.css';

export default function StackRow() {
  return (
    <Stack direction="row" gap="small" wrap="wrap">
      <Text className={styles.item}>Draft</Text>
      <Text className={styles.item}>In review</Text>
      <Text className={styles.item}>Published</Text>
    </Stack>
  );
}
```

```css
/* stack.module.css */
.item {
  padding: var(--semantic-dimension-space-padding-small);
  border-radius: var(--semantic-dimension-radius-small);
  background: var(--semantic-color-background-fill-secondary);
}
```

## Stretch

Children keep their own width by default. `align="stretch"` makes them fill the cross axis.

```tsx
// align.tsx
import {Stack, Text} from '@earendil-works/elanor-react';

import styles from './stack.module.css';

export default function StackAlign() {
  return (
    <Stack align="stretch">
      <Text className={styles.item}>Draft</Text>
      <Text className={styles.item}>In review</Text>
      <Text className={styles.item}>Published</Text>
    </Stack>
  );
}
```

```css
/* stack.module.css */
.item {
  padding: var(--semantic-dimension-space-padding-small);
  border-radius: var(--semantic-dimension-radius-small);
  background: var(--semantic-color-background-fill-secondary);
}
```

## Space between

`gap="auto"` puts all free space between the children, pushing them to the ends. They keep at least the `medium` gap, also between wrapped lines.

```tsx
// gap-auto.tsx
import {Stack, Text} from '@earendil-works/elanor-react';

import styles from './stack.module.css';

export default function StackGapAuto() {
  return (
    <Stack direction="row" gap="auto" align="center" wrap="wrap">
      <Text className={styles.item}>Website redesign</Text>
      <Text className={styles.item}>3 open tasks</Text>
    </Stack>
  );
}
```

```css
/* stack.module.css */
.item {
  padding: var(--semantic-dimension-space-padding-small);
  border-radius: var(--semantic-dimension-radius-small);
  background: var(--semantic-color-background-fill-secondary);
}
```

## API

### `Stack`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `direction` | `'row' \| 'column'` | `'column'` | Main axis: `column` stacks vertically, `row` horizontally. |
| `gap` | `'xxSmall' \| 'xSmall' \| 'small' \| 'medium' \| 'large' \| 'xLarge' \| 'auto'` | `'medium'` | Space between children. `auto` puts free space between them, at least the `medium` gap. |
| `align` | `'start' \| 'center' \| 'end' \| 'stretch'` | `'start'` | Cross-axis alignment. `stretch` makes children fill the cross axis. |
| `wrap` | `'wrap' \| 'nowrap'` | `'nowrap'` | Whether children wrap onto new lines when space runs out. |

Renders `<div>`. Also accepts its HTML attributes and `ref`.