[docs] Instructions in Grid v1 not specified in Grid v2

[ccowen]

Related page

https://mui.com/material-ui/react-grid2/

Kind of issue

Unclear explanations

Issue description

I'm having trouble with Grid2, with a couple of things. I want a container to take up 100% height of a page. I also want to create a Grid item that is centered vertically. I would easily be able to apply this in Grid1, which is on the documentation page, with

alignItems: "center", /* "center" to center elements vertically, or "stretch" to stretch the height to fill the space*/

I am unsure if i am supposed to accomplish this another way. In Grid v1 these instructions are specified, but I am unable to learn how to apply this for Grid v2. Heught is not meentioned on this page at all. I have looked into incorporating other components but am lost.

Context

I would like these features explained in v2 as they are presented in Grid v1.

Search keywords: Grid v2, height, stretch

[siriwatknp]

I would easily be able to apply this in Grid1, which is on the documentation page, with
alignItems: "center", /* "center" to center elements vertically, or "stretch" to stretch the height to fill the space*/

Can you point me to that section? I can add it to the Grid 2 docs if it's missing.

FYI, you can achieve the same with sx prop:

<Grid2 sx={{ alignItems: 'center' }}>

[ccowen]

Thank! Yes, I am referring to https://mui.com/material-ui/react-grid/ under Interactive section. Thanks for that code snippet, that applied but I am also looking to justtifyContent: "center" and it is not applying. I am trying multiple things and am not getting it. I want to make a Grid as pictured (from v1 Grid docs)

[DiegoAndai]

@siriwatknp, let's add the interactive demo and ensure that all functionalities from Grid v1 are achieved. Adding "ready to take" in case anyone has time to open a PR before we do.

[yash49]

Hey @DiegoAndai, @siriwatknp
I would like to work on this

[DiegoAndai]

Hey @yash49! Sure 😊, go ahead. Let me know if you need any help. Thanks in advance.

[yash49]

Hey @siriwatknp @DiegoAndai
please review the PR #44820

[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

@ccowen 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.

[DiegoAndai]

Hey @ccowen! We recently added a demo that shows that all positioning options in Grid v1 work for Grid v2. It's not deployed yet but you can check it out here: https://deploy-preview-44820--material-ui.netlify.app/material-ui/react-grid2/#interactive

In other words, whatever that can be achieved in the Grid v1 interactive demo is also achievable in Grid v2.

If the demo is not enough to fix your issue, please reach out with a minimal reproduction. With a minimal reproduction, I could try to debug your issue specifically. A live example would be perfect. This StackBlitz sandbox template may be a good starting point. Thank you!