Grid gap property not reading theme space values
See original GitHub issueDescribe the bug
Hi, <Grid />
gap
property doesn’t respect spaces from connected theme while sx
does.
To Reproduce Steps to reproduce the behavior:
- Setup basic example with theme:
const theme = {
space: [0, 2, 4, 8, 12, 16, 20, 24, 32, 64, 128, 256, 512],
...
}
Expected behavior
<Grid gap={2} />
resulting in grid with gap of 4px
Issue Analytics
- State:
- Created 2 years ago
- Comments:8 (5 by maintainers)
Top Results From Across the Web
gap - CSS: Cascading Style Sheets - MDN Web Docs
The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.
Read more >Minding the "gap" | CSS-Tricks
The gap disappeared. Even if column-gap did add space between items when the container was in a row direction, it does not work...
Read more >CSS | grid-gap Property - GeeksforGeeks
The grid-gap property sets the size of the gap between the rows and columns in a grid layout. It is a shorthand property...
Read more >How can I remove an unexplained space/gap beneath grid ...
The image should have display property, wether it's block, inline-block etc.
Read more >Grid - .NET MAUI | Microsoft Learn
Similarly, the default value of the ColumnDefinition.Width property is * . Therefore, it's not necessary to set these properties in cases where ...
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
The problem might be caused by context version mismatch (and serve as another reason for us to move Emotion to peerDeps), so I’d look for the cause in package.json.
@hasparus makes sense, thank you! 🙏