--- title: Row storybookPath: page-layout-row--default isExperimentalPackage: false ---
---
title: Row
storybookPath: page-layout-row--default
isExperimentalPackage: false
---
Used to distribute children horizontally, with even spacing between each child.
``jsx live`
The spacing between children can be adjusted using the gap prop.
`jsx live`
Items can be aligned vertically using the alignY prop.
`jsx live`
Items can be aligned horizontally using the align prop.
`jsx live`
Use the dividers property to render a Divider between each
element in the Row.
`jsx live`
Row props also include Box props and are not listed heredisplay
(excludes , alignItems, flexDirection, justifyContent andflexWrap).
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