This component displays its children in a vetical grid.
<Ui.Column 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.Column>
<> <Ui.Column 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.Column> <Ui.Column 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.Column> <Ui.Column 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.Column></>
<> <Ui.Column 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.Column> <Ui.Column 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.Column> <Ui.Column 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.Column> <Ui.Column align="stretch"> <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.Column></>
<> <div style="height: 400px;display:grid;"> <Ui.Column 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.Column> </div> <div style="height: 400px;display:grid;"> <Ui.Column 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.Column> </div> <div style="height: 400px;display:grid;"> <Ui.Column 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.Column> </div> <div style="height: 400px;display:grid;"> <Ui.Column justify="stretch"> <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.Column> </div></>
Mint UI is a design system and component library for building websites, web and desktop applications.