Сетка с отрицательным краем (вверху) нарушает мой интерфейс

Question

У меня есть иллюстрация кода в реальном времени проблемы здесь , как вы можете видеть, между h1 и решеткой нет места (я ожидал 12px, так как попросил интервал 24px).Если вы откроете консоль, вы увидите, что отрицательное поле ставит Grid выше h1, это то, что мне нужно исправить.

Я что-то здесь не так делаю?Как правильно его исправить, если я хочу, чтобы интервал 24px корректно применялся с h1?

Надеюсь, нам не нужно инкапсулировать h1 в контейнер Grid> сам элемент Grid.

Answer 1

Атрибут spacing устанавливает интервал между Grid items внутри Grid container, но не между сторонами item и contaianer.Таким образом, вы получите:

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

Но элементы не смещены по сторонам контейнера (конечно, в зависимости от значений justify и alignItems|Content).Это достигается добавлением padding к элементам и отрицательного margin к контейнеру и настройкой контейнера width.

Самое простое, что можно сделать, это добавить marginBottom к заголовку* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * .Для точного управления я часто устанавливаю spacing={0} и использую API-интерфейс MUI для реализации расстояния между элементами при вложении Grid s.