[Grid2] Layout do not work the same way as Grid

[LoicMartinez]

Steps to reproduce

Steps:

1. Open this link to live example: codesandbox
2. The sandbox start with Grid (old), on the first selector, select 5 or more item, layout work as intended
   
3. Click on the top button to switch to the Grid2 component, select 5 items on the first selector, the layout is broken
   

Current behavior

No response

Expected behavior

No response

Context

The layout i'm using here may simplified (i could use one column grid and two row grid) but it need to be that way, there are a lot of style i did not include to be as simple as possible

Your environment

No response

Search keywords: Grid2 layout, Grid2, Grid

[siriwatknp]

Grid2 Layout do not work the same way as Grid

Yes, that's the point the building the Grid2. Based on your code, I think you are using the Grid incorrectly.

• Why do you need a <Grid direction="column">? using <Stack> makes more sense.
• The layout looks overcomplicated. Maybe if you can explain what kind of layout you want to achieve, then we can justify if the Grid is working correctly or not.

[LoicMartinez]

Thanks for the reply.

I updated the sandbox with spacing for the position.
I need to have 2 block of 4 selectors, one on the left and one on the right. With a bigger separation on the center. (hope you understand what i mean by that)

I'm only using Grid for this because it is state on the MUI documentation :

Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical and horizontal arrangement.

Also, I'm thinking, if a layout like that is broken with Grid2, what else could break ? It is supposed to create multi dimensional layout, it should probably not be broken like that on a still simple layout

[DiegoAndai]

Hey @LoicMartinez! Thanks for the report.

You're missing the size property on one of the nested grid containers:

 export default function NewGrid() {
   return (
     <div>
       <Grid2 container direction="row" spacing={4}>
         <Grid2 container direction="column" size={6} spacing={1}>
-          <Grid2 container direction="row" spacing={1}}>
+          <Grid2 container direction="row" spacing={1} size={12}>
             <Grid2 size={6}>
               <MultipleSelect />
             </Grid2>
             <Grid2 size={6}>
               <MultipleSelect />

By adding size={12} (size="grow" also works), we specify that this container should use all the space available. Here's your sandbox fixed: https://codesandbox.io/p/sandbox/issue-44716-fix-f2z8k2. Let me know if this fixes your issue.

If you're interested, I would suggest refactoring your code to be closer to our Grid2 demos. Instead of using direction 'row'|'column' and nesting Grid components, You could have one container like this demo: https://mui.com/material-ui/react-grid2/#basic-grid. This is the recommended way of using the Grid

[LoicMartinez]

Thanks for the help, it fixed my issue ! I'm gonna get ride of the direction props if it should not be used anymore for nested grid like this one !

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@LoicMartinez How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.