Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
ccowen opened this issue Dec 13, 2024 · 5 comments · May be fixed by #44820
Open

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

ccowen opened this issue Dec 13, 2024 · 5 comments · May be fixed by #44820
Assignees
@siriwatknp
Labels
component: Grid The React component. docs Improvements or additions to the documentation ready to take Help wanted. Guidance available. There is a high chance the change will be accepted support: docs-feedback Feedback from documentation page

Comments

@ccowen
Copy link

ccowen commented Dec 13, 2024 •
edited by github-actions bot
Loading

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
@ccowen ccowen added status: waiting for maintainer These issues haven't been looked at yet by a maintainer support: docs-feedback Feedback from documentation page labels Dec 13, 2024
@siriwatknp
Copy link
Member

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' }}>

@siriwatknp siriwatknp added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 16, 2024
@ccowen
Copy link
Author

ccowen commented Dec 18, 2024

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)

Screen Shot 2024-12-18 at 2 49 04 PM

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Dec 18, 2024
@zannager zannager added the component: Grid The React component. label Dec 19, 2024
@DiegoAndai
Copy link
Member

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

@DiegoAndai DiegoAndai added ready to take Help wanted. Guidance available. There is a high chance the change will be accepted and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 19, 2024
@DiegoAndai DiegoAndai moved this to Selected in Material UI Dec 19, 2024
@DiegoAndai DiegoAndai added the docs Improvements or additions to the documentation label Dec 19, 2024
@yash49
Copy link
Contributor

yash49 commented Dec 20, 2024

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

@DiegoAndai
Copy link
Member

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

@yash49 yash49 linked a pull request Dec 20, 2024 that will close this issue
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@siriwatknp siriwatknp

Labels
component: Grid The React component. docs Improvements or additions to the documentation ready to take Help wanted. Guidance available. There is a high chance the change will be accepted support: docs-feedback Feedback from documentation page
Projects
Material UI
Status: Selected
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[docs] Add interactive demo for Grid v2 yash49/material-ui
5 participants
@ccowen @DiegoAndai @siriwatknp @yash49 @zannager