Ui.Grid

Arranges its children in a responsive grid based on column size.

Interactive Demo

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

Width (200px)
Mobile Width (50px)
Gap (20px)
<Ui.Grid
mobileWidth={Ui.Size.Px(50)}
width={Ui.Size.Px(200)}
gap={Ui.Size.Px(20)}>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
</Ui.Grid>
Width

The width of a column can be controlled using the width property.

<>
<div style="width: 500px;">
<Ui.Grid
mobileWidth={Ui.Size.Px(100)}
width={Ui.Size.Px(100)}
gap={Ui.Size.Px(10)}
>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
</Ui.Grid>
</div>
<div style="width: 500px;">
<Ui.Grid
mobileWidth={Ui.Size.Px(150)}
width={Ui.Size.Px(150)}
gap={Ui.Size.Px(10)}
>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
</Ui.Grid>
</div>
<div style="width: 500px;">
<Ui.Grid
mobileWidth={Ui.Size.Px(300)}
width={Ui.Size.Px(200)}
gap={Ui.Size.Px(10)}
>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
</Ui.Grid>
</div>
</>
Gap

The gap between the columns can be controlled using the gap property.

<>
<div style="width: 500px;">
<Ui.Grid width={Ui.Size.Px(100)} gap={Ui.Size.Px(10)}>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
</Ui.Grid>
</div>
<div style="width: 500px;">
<Ui.Grid width={Ui.Size.Px(100)} gap={Ui.Size.Px(20)}>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
</Ui.Grid>
</div>
<div style="width: 500px;">
<Ui.Grid width={Ui.Size.Px(100)} gap={Ui.Size.Px(40)}>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
<div style="background: gray;height: 100px;"/>
</Ui.Grid>
</div>
</>
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.