Horizontally stacked components, with convenience wrap and expand props. By default, all children are vertically centered and horizontally start-aligned.

Props API

PropTypeDefault value
boolean | FlexWrapnowrap
string | booleanfalse
Gap<string | number>
"row" | "column"
string | number
Padding<string | number>
Padding<string | number>
Padding<string | number>
Padding<string | number>
import { Row, RowProps, rowStyles } from '@christiankaindl/lyts'

Use Row when you need to stack elements horizontally. This has many use cases such as toolbars, breadcrumbs or a list of tags.


Row supports the wrap prop which, as the name suggests, wraps items into the next line when the current row doesn't have enaugh space. This is useful when displaying a set of tags or metadata where the content is often dynamic:

// Edit the live code below
<Row wrap style={{ maxWidth: 500 }}>
<Box style={{ width: 65 }} />
<Box style={{ width: 150 }} />
<Box style={{ width: 100 }} />
<Box style={{ width: 150 }} />
<Box style={{ width: 15 }} />
<Box style={{ width: 75 }} />


It is common to have elements on opposite sides of each other, but aligned on the same axis. LYTS provides the Split component, which can be used together with Row and Stack to "split" up the remaining space:

Split layouts also work great with the wrap prop. When used together you get a large layout on desktops which collapses below each other on small screens:

The elements on the right are contained in another Row (but could be any container) so they will wrap into the next line together, removing odd in-between states when resizing.

Aligning children

By default, Row centers its children vertically, and start-aligns items horizontally. This can be easily customized with the xAlign and yAlign props:

Note: xAlign and yAlign are convenience props. The same effect can be achieved using "align-items" (yAlign) and "justify-content" (xAlign)

Examples using Row