How can we achieve space-between when elements are in column wise when using MUI Grid. Read about some answers that by giving flex:1 and height:100% we could achieve. But as I am using MUI Grid I want to know how this could be achieved in grid instead of flex? Attaching the code sandbox, where I need separation between two buttons as I am trying to show the second button in bottom.

https://codesandbox.io/s/boxsx-material-demo-forked-392dfl?file=/demo.tsx

CodePudding user response：

Use gap property for spacing

forked codesandbox

CodePudding user response：

Give height to the container grid and it will serve your purpose. Your code is right but if you want to put button at the bottom your div then it should take that much space so that it can place it.

      <Grid
         container
         direction="column"
        style={{ height: "90vh" }}
         justifyContent="space-between"
         alignItems="center"
         
       >