Row
For horizontal layouts where you don't want it to wrap:
<Row simple>
<Box h="4xl" bg="red200" />
<Box h="4xl" bg="orange200" />
<Box h="4xl" bg="yellow200" />
<Box h="4xl" bg="green200" />
</Row>
The simple prop will automatically create equally sized columns for you, but 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>