New Component: grid

[mtanco]

MLOps project card:

page["project_2"] = ui.form_card(
    box="projects",
    items=[
         # Missing functionality - Grid layout
        ui.inline(items=[
            ui.text("Experiment Count"),
            ui.text("Registered Model Versions"),
        ]),
        ui.inline(items=[
            ui.text_xl("21"),
            ui.text_xl("12"),
        ]),
        ui.inline(items=[
            ui.text("Deployed Model Version"),
            ui.text("Total Deployments"),
        ]),
        ui.inline(items=[
            ui.text_xl("32"),
            ui.text_xl("43"),
        ]),    
    ]
)

There are times when you would want to create rows and columns within a form or other card, calling for a new ui.grid component. I am open to suggestions for how the user adds items. A list of lists might be good?

        ui.grid(
            items=[
                [ui.text("Experiment Count"), ui.text("Registered Model Versions")],
                [ui.text_xl("21"), ui.text_xl("32")],
                [ui.text("Experiment Count"), ui.text("Registered Model Versions")],
                [ui.text("Experiment Count"), ui.text("Registered Model Versions")],
            ]
        )

https://xd.adobe.com/view/eebb600c-026b-4ca1-bb6b-0a439235452b-bbe8/specs/

[mturoci]

@mtanco You need to control the width (Experiment count, 21, Deployed Model Version, 32 - all have to have the same width) which is introduced in #795. That way, the alignment depicted in the image can be achieved. This is solution is not scalable (as for code maintainability) though.

@lo5 do you feel like we need to introduce the grid or is the width solution good enough?

[mtanco]

Thanks @mturoci ! It looks like #795 is on all form elements so I am happy to close this. To be clear, just width='50%' could be used for each text element?

[mturoci]

To be clear, just width='50%' could be used for each text element?

Yes, both px and % values should work.