This component displays its children in a only one axis grid (in a line).
<Ui.Container orientation="horizontal" gap={Ui.Size.Px(20)} justify="stretch" align="center"> <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.Container>
<> <Ui.Container 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.Container> <Ui.Container 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.Container> <Ui.Container 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.Container></>
<> <Ui.Container orientation="horizontal"> <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.Container> <Ui.Container orientation="vertical"> <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.Container></>
<> <Ui.Container 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.Container> <Ui.Container 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.Container> <Ui.Container 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.Container></>
<> <Ui.Container 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.Container> <Ui.Container 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.Container> <Ui.Container 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.Container></>
Mint UI is a design system and component library for building websites, web and desktop applications.