Row
For horizontal layouts where the children should never wrap.
The simple prop will automatically create equally sized columns for you:
<Row simple>
<Box h="4xl" bg="red200" />
<Box h="4xl" bg="orange200" />
<Box h="4xl" bg="yellow200" />
<Box h="4xl" bg="green200" />
</Row>
If you want more control, use the Column component:
<Row>
<Column width={1 / 2}>
<Box h="4xl" bg="red200" />
</Column>
<Column width={1 / 6}>
<Box h="4xl" bg="orange200" />
</Column>
<Column width={1 / 6}>
<Box h="4xl" bg="yellow200" />
</Column>
<Column width={1 / 6}>
<Box h="4xl" bg="green200" />
</Column>
</Row>Columns with no width="auto" (the default) will expand to the size of their children and columns with width="expand" will expand to fill any extra space:
<Row>
<Column width={1 / 6}>
<Box h="4xl" bg="red200" />
</Column>
<Column>
<Box h="4xl" w="10xl" bg="red200" />
</Column>
<Column width="expand">
<Box h="4xl" bg="orange200" />
</Column>
</Row>