How to set FluentGridItem column widths (sm=x) at runtime

[markarnolditpro]

How can we set the FluentGridItem.sm property at runtime? I'm trying to create a dynamic grid that the user can switch between 1x, 2x2, and 3x3 cells. So far I've tried this:

    <FluentGridItem @ref=cell0 sm="12">
        Cell0
    </FluentGridItem 

    code {
        FluentGridItem cell0;
 
        void OnBtnClick()
        {
            cell0.sm = 4
        }
    }

The designer shows this green squiggly on cell0.sm = 4:

Component parameter should not be set outside of it's component

Is there a preferred way to pull this off?

[dvoituron]

You can use a code like this one.

<FluentGridItem sm="@GridSM">
    Cell 0
</FluentGridItem 

@code {
    private int? GridSM;

    private void OnBtnClick()
    {
        GridSM = 4
    }
}

[markarnolditpro]

Thank you @dvoituron!