Grid Layout: Index out of bounds

[AnotherCoolDude]

I try to display 15 Buttons as a grid. The layout works as column or row, but as soon as I change the layout to grid, the app crashes. My code looks like this:

     let items_ui = Style {
        layout_type: StyleProp::Value(LayoutType::Grid), // LayoutType::Column works fine
        ..ui_props.clone().styles.unwrap_or_default()
    };

    rsx! {
        <Element styles={Some(items_ui)}>
        {VecTracker::from(handles.iter().map(|(_, h)| {
            constructor! {
                <Item event_type=
                {UIEventType::None}
                handle={Some(h.clone())} />
            }
        }))}
        </Element>
    }

The error I receive is this:

thread 'main' panicked at 'index out of bounds: the len is 2 but the index is 2', C:\Users\Admin.cargo\git\checkouts\morphorm-b1c9411b3870fca5\1243152\src\layout.rs:1374:37

the code at the described position in layout.rs is this:

let col_start = 2 * node.col_index(store).unwrap_or_default() + 1;
let col_span = 2 * node.col_span(store).unwrap_or(1) - 1;
let col_end = col_start + col_span;

let new_posx = col_widths[col_start].0;
let new_width = col_widths[col_end].0 - new_posx; // this is where the error occurs

let new_posy = row_heights[row_start].0;
let new_height = row_heights[row_end].0 - new_posy;

This looks like a bug to me, but maybe I don't fully understand the layout mechanism. Any Idea on how to fix the error?

[StarArawn]

This looks like code inside of the layout library we use called morphorm. We might be able to update the dependency to fix.

[geom3trik]

When using the grid layout type you need to define your rows and columns for the parent and then each child needs a row_index, row_span, col_index, and col_span. The spans default to 1 if you don't specify them but you do need to specify the indices.

Looking at the Style struct in kayakui I can't see these grid properties so it's possible they're not supported. In case I am wrong though it works something like this (pseudocode):

// Properties on parent
layout_type(LayoutType::Grid);
grid_rows(vec[Stretch(1.0), Stretch(1.0), Stretch(1.0)]);  // Grid will have 3 stretch rows
grid_cols(vec[Pixels(300.0), Stretch(1.0), Stretch(1.0)]); // Grid will have one fixed column and 2 stretch columns

// Properties on children
col_index(0);
col_span(1);
row_index(0);
row_span(2);
^ child will be positioned in the first grid cell (top-left), span one column and 2 rows

The bug here is that the layout fails when these properties aren't set. Probably the defaults should be changed so that the layout doesn't fail.