Row

Props API

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.

Wrapping

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 }} />
</Row>

Split-layouts

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