[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.