This component displays its children in a horizontal grid.
<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>
<> <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></>
<> <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></>
<> <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 is a design system and component library for building websites, web and desktop applications.