I am not able to code the middle layout which is highlighted in pink circle
I want to make this layout in materialUi react
I am not sure about what you are asking, but I hope this will help you
there are different ways to do what you are trying to do, but I think it is important to maintain the correct grid order to do it.
Inside the pink circle seems to me that you are forgetting to wrap the card inside a grid item component, which would give you the possibility to align the cards in the way that you want.
I did a super easy example to better explain my point: https://codesandbox.io/s/material-demo-forked-6ylvv
Inside the container you can also decide to align with direction="column" and using xs={6}.. this is up to you, in the Material-UI documentation you can find different ways, I suggest you to spend more time in it and remember always to use item inside the container
