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] Change spacing

See original GitHub issue

How can I change spacing of Grid component as it doesn’t respect theme.spacing.unit

I want <Grid container spacing={8}> to have margin: -5px and its <Grid item> to have padding: 5px. I did this in overrides key of theme.

MuiGrid: {
  container: {
    '&$spacing-xs-8': {
      margin: -5,
    }
  }

It worked with the container but not the item. How can I select Grid children of this container

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:19 (12 by maintainers)

github_iconTop GitHub Comments

5reactions
Richtervncommented, Oct 12, 2018

@mediafreakch yeah. I used overrides.

Here is an example how I override MuiGrid spacing={16}

container: {
    '&$spacing-xs-16': {
      width: `calc(100% + ${spacing.unit * 2}px)`,
      margin: -spacing.unit,
      '& $item': {
        padding: spacing.unit
      }
    }
  }
1reaction
oliviertassinaricommented, Jan 5, 2019

Yes

Read more comments on GitHub >

github_iconTop Results From Across the Web

To Display a Grid and Set the Grid Spacing | AutoCAD 2022
On the Status Bar, right-click on grid display Find and select Grid Settings. Note: The status bar is located in the lower right-hand...
Read more >
CSS grid-gap property - W3Schools
The grid-gap property defines the size of the gap between the rows and columns in a grid layout, and is a shorthand property...
Read more >
Spacing, grids, and layouts - DesignSystems.com
A column grid helps you organize content into evenly spaced vertical columns. The space between columns is referred to as the gutter size....
Read more >
How to Change the Grid Spacing in PowerPoint
You can change the grid spacing options in the Grid and Guides settings dialog box under Grid settings group. You may change the...
Read more >
Grid Spacing | WinForms Controls - DevExpress Documentation
Grid spacing is the distance between major grid lines. It is also a distance between major tickmarks or interlacing colors. grid-spacing ...
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