Grid auto-alignment is not matching expectation
See original GitHub issue- I have searched the issues of this repository and believe that this is not a duplicate.
Expected Behavior
When I use auto layout the grid items must not go outside of the grid.
It is expected that the container outside the grid defines max width possible. When Grid items have xs
property with no value, all columns align automatically.
(This is what I get from the demo docs).
Current Behavior
I created an example here - https://codesandbox.io/s/1ow4q5557l
The text is going out of bounds because the second Grid Item (column) is bigger that what it should be.
Context
Unable to align the items correctly.
Note what I have pasted in codesandbox is simplified code. In my actual grid item there are many more typography elements so I cannot fallback to using the “List” component.
If I am using this incorrectly then please let me know.
Your Environment
Tech | Version |
---|---|
Material-UI | 1.0.0-beta.29 |
React | 16.2.0 |
browser | Chrome 63.0.3239.132 |
etc |
Issue Analytics
- State:
- Created 6 years ago
- Comments:11 (11 by maintainers)
Top Results From Across the Web
Grid auto-alignment is not matching expectation #9971 - GitHub
When I use auto layout the grid items must not go outside of the grid. It is expected that the container outside the...
Read more >Grid item not aligning as expected - Stack Overflow
Because grid layout only extends between parent and child elements, the . item element is out of scope and will not accept grid...
Read more >Align your content quickly and easily with Auto Fix
Using Auto Fix, you can automatically align, uniformly resize, ... You'll see an error stating that elements must be in a grid format...
Read more >Box Alignment and Grid Layout – make everything intensely
This post is about how it affects to the Grid Layout implementation. ... within a row or column) by matching up their alignment...
Read more >RadGrid Column header and data item alignment problem
I've started having an alignment issue on IE when updated to version 11.0.30. When there is no data in the grid, the grid...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Either / or. I guess a prop is more user friendly than having to document known issues.
Will change PR to option 1.