Grid with negative margin (top) break my UI

Question

I have a live code illustration of the issue here, as you can see, there is no space between the h1 and the Grid bellow (i was expecting 12px as i asked for a 24px spacing). If you open the console, you can see that a negative margin put the Grid above the h1, that's what i need to fix.

Am i doing something wrong here? What is the right way to patch it if i want the 24px spacing to be applied correctly with the h1?

I hope we don't have to encapsulate the h1 in a Grid container > Grid item itself.

Answer 1

The spacing attribute sets the spacing between the Grid items inside the Grid container, but not between the item and contaianer sides. So, you end up with:

--------------------------
|----------    ----------| 
|| item   |<-->| item   ||
|----------    ----------|
|   ^              ^     | 
|   |              |     | 
|   v              v     | 
|----------    ----------| 
|| item   |<-->| item   ||
|----------    ----------| 
--------------------------

But the items are not offset from the sides of the container (depending on the justify and alignItems|Content values of course). This is accomplished by adding padding to the items and a negative margin to the container and adjusting the container width.

The easiest thing to do would be to add a marginBottom to the title style as shown here.

Because of the negative margin and width manipulation, nesting Grid containers can be tricky, though there are some recommendations for how to deal with it. For fine-control, I often set spacing={0} and use the MUI spacing API to implement the spacing between the items when nesting Grids.