-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
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.
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
[Grid] grid item doesn't respond to grid container's responsive columns correctly #29379
Comments
I can reproduce it with https://codesandbox.io/s/responsivegrid-material-demo-forked-q9cdi. @hbjORbj Do you want to take this? |
@kkorach Thanks for creating the issue. Just to clarify the problem here, it seems that grid item does not respond to grid container's responsive |
@kkorach Hey, this was discussed in a team meeting, and there was a suggestion that instead of having: you can do the following: Demo: https://codesandbox.io/s/responsivegrid-material-demo-forked-vmnx8?file=/demo.tsx:474-690 I think this achieves what you were trying to do in the first place. Am I right? |
We're trying to create a constrained version of Grid that matches the responsive design layout and a couple other things (spacing). Internally our developers will use that instead of the mui Grid. I don't think the workaround will work because I'm not trying to fix a specific usage. |
@kkorach Sure, I will have a look and work on fixing the problem I clarified earlier.
|
I dug into it a little bit. When you specify a Grid item size, In
In my case where I only specify |
You mean it wouldn't carry over, right?
yep, that's what I meant earlier by
Would you like to work on this by any chance? |
I can. I'm new to contributing (would be second PR) and have read the contributing guide. Is there more information on how to use the docs site as a development environment? It would also be helpful if you could help point to where |
That sounds good enough! After you create a PR, you can request a review from me and I will review!
There are utils you can use in
However, size props like |
Which example are you referring to? FYI, |
My mistake sorry it does work, sorry again! |
The Grid component is documented as supporting responsive columns but it only uses the first breakpoint's value.
Current Behavior 😯
The Grid renders with 4 columns regardless of browser width.
Expected Behavior 🤔
The number of columns in the Grid should change as the browser gets wider.
Steps to Reproduce 🕹
Sandbox from the Grid API documents
https://codesandbox.io/s/uzb8q?file=/demo.tsx
Steps:
<Grid item xs={1} key={index}>
so they only take up one column.The debugger shows that Grid's
generateGrid
method gets called with the same breakpointxs
each time, even though GridRoot should be calling it with each of the breakpoints.Context 🔦
Trying to implement the Material Design Responsive Layout Grid
https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
The text was updated successfully, but these errors were encountered: