2

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?

https://codesandbox.io/s/basicaccordion-demo-material-ui-forked-sw4juk?file=/demo.tsx

enter image description here

Wilson Brians
  • 157
  • 1
  • 7
  • 1
    sorry. I tried to make it. but it seems to be impossible. instead, you can change your component and render items in two separate columns. but you should divide items into two length-equal lists. – mahdi gholami Jun 07 '22 at 21:54
  • As the main container is a flexbox container, its child elements must be allowed to stretch their height to the tallest element in the row they're in. Like `justify-content: stretch` or `height: 100%`. Your codesandbox contains a few errors and I don't know MUI, so I can't help you further. – Rene van der Lende Jun 07 '22 at 23:13

1 Answers1

3

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

Grid Layout

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

enter image description here

EXAMPLE (I forked your sandbox)

enter image description here

ckesplin
  • 1,284
  • 1
  • 9
  • 15