I have a grid of accordions like in the codesandbox below. The problem is when I open one of the accordions, it pushes down all the accordions in the row below, whereas the desired behaviour is to just push down the accordion right below it and the other accordions in the lower row staying in the same place. What needs to be changed in the following code to get this effect?

CodePudding user response：

You can utilize the power of the Grid component to get your desired behavior. Nesting grids within grids is the magic sauce:

To do this with the material Grid component, the layout will need to be as such: