question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Grid gap property not reading theme space values

See original GitHub issue

Describe the bug

Hi, <Grid /> gap property doesn’t respect spaces from connected theme while sx does.

To Reproduce Steps to reproduce the behavior:

  1. 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:closed
  • Created 2 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
hasparuscommented, Jul 5, 2021

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.

0reactions
sergeylukincommented, Jul 7, 2021

@hasparus makes sense, thank you! 🙏

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found