@spark-web/row

---
title: Row
storybookPath: page-layout-row--default
isExperimentalPackage: false
---

Used to distribute children horizontally, with even spacing between each child.

``jsx live





`

Examples

$3

The spacing between children can be adjusted using the gap prop.

`jsx live






















`

$3

Items can be aligned vertically using the alignY prop.

`jsx live






















`

$3

Items can be aligned horizontally using the align prop.

`jsx live

















`

$3

Use the dividers property to render a Divider between each
element in the Row.

`jsx live

First item
Second item
Third item

`

Props

Row props also include Box props and are not listed here
(excludes display, alignItems, flexDirection, justifyContent and
flexWrap).

Extra props are also passed into the underlying Box` component.

[align]:
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/inline/src/Inline.tsx#L16
[align-y]:
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/inline/src/Inline.tsx#L18
[data-attribute-map]:
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1