Ui.Row

This component displays its children in a horizontal grid.

Interactive Demo

You can play around with a Ui.Row below using the controls:

Justify
stretch
Align
stretch
Gap (20px)
<Ui.Row
gap={Ui.Size.Px(20)}
justify="stretch"
align="stretch">
<div style="background: gray;min-width: 100px;min-height: 100px;"/>
<div style="background: gray;min-width: 50px;min-height: 50px;"/>
<div style="background: gray;min-width: 25px;min-height: 25px;"/>
</Ui.Row>
Gap

The space betweem the items can be controlled usign the gap property.

<>
<Ui.Row gap={Ui.Size.Px(10)}>
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Row>
<Ui.Row gap={Ui.Size.Px(30)}>
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Row>
<Ui.Row gap={Ui.Size.Px(60)}>
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Row>
</>
Align

The the alignment of the items can be controlled usign the align property.

<>
<Ui.Row align="start">
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Row>
<Ui.Row align="center">
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Row>
<Ui.Row align="end">
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Row>
</>
Justify

The the justification of the items can be controlled usign the justify property.

<>
<Ui.Row justify="start">
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Row>
<Ui.Row justify="center">
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Row>
<Ui.Row justify="end">
<div style="background: gray;min-height: 100px;min-width:100px;"/>
<div style="background: gray;min-height: 50px;min-width:50px;"/>
<div style="background: gray;min-height: 25px;min-width:25px;"/>
</Ui.Row>
</>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.