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

[ccowen]

Thank y'all very much for working on this! I am still having trouble. Hoping we can look at the demo option @DiegoAndai .

I am coding the framework for content on this page. Here is the demo code, https://stackblitz.com/edit/stackblitz-starters-f8vs8m1c?file=src%2FApp.tsx

This is what i'm trying to create, (though this is not on a Grid here, not looking for pixel perfect):

Same image with outlines of 'containers'

I think I am having issues when items become containers, and getting a Grid item to full up vertical space. I used 100vh but I was not happy with that solution.

I started with the left side and have sample text 'test test test' where I want the content in the yellow left rectangle to go. I am unable to create vertically centered elements, aka space where I put yellow arrows.

[DiegoAndai]

Hey @ccowen, I think the best approach here would be to use a combination of Stack and Grid, here's an initial implementation from your sandbox: https://stackblitz.com/edit/stackblitz-starters-v5rpudmu?file=src%2Fstyle.css,src%2Findex.tsx,src%2FHomePage.tsx

For further help, I would suggest you reach out to our StackOverflow community. I won't be able to provide further guidance here. I hope you're able to implement your site 😊.

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

[github-actions]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[ccowen]

Hey @ccowen, I think the best approach here would be to use a combination of Stack and Grid, here's an initial implementation from your sandbox: https://stackblitz.com/edit/stackblitz-starters-v5rpudmu?file=src%2Fstyle.css,src%2Findex.tsx,src%2FHomePage.tsx

For further help, I would suggest you reach out to our StackOverflow community. I won't be able to provide further guidance here. I hope you're able to implement your site 😊.

Thank you! This is really helpful. I was thinking I knew how to do this in Grid1 and not Grid2. The stack overflow seems heelpful.