Arranges its children in a responsive grid based on column size.
<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>
<> <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></>
<> <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 is a design system and component library for building websites, web and desktop applications.