Grid: prop columns is ignored (no context is found for grid items)

[boblelot]

Hi,

I don't think Grid is behaving correctly when setting columns value on grid container.

Example: Contains 2 examples, the first one being a copy of https://mui.com/material-ui/react-grid/#columns https://stackblitz.com/edit/angular-ey1m2j?file=src/App.tsx

Expected behavior Items in grid should become larger or smaller in width. reflecting the change to columns prop.

Other It looks like the issue is related to useContext(GridContext) as its always undefined.

const Grid = $.component(function Grid({ allProps, props, otherProps, classes, }) {
    ...
    const columnsContext = useContext(GridContext);
    ...
    const columns = props.columns || columnsContext || 12;
    // if Grid container with columns={20},  
    console.log(props.columns, columnsContext) // -> 20, undefined.
    // if Grid item in the Grid container. 
    console.log(props.columns, columnsContext)  // -> undefined, undefined.
    ...
});

I'm relative new to Solidjs so i won't be able to provide a PR anytime soon, id imagine we need to check if we are on a grid container and then call createContext

https://www.solidjs.com/docs/latest/api#createcontext

Temp fix is to set columns prop on grid items