GridItem

GridItem — ячейка внутри Grid: div, у которого свойства размещения в сетке вынесены в пропсы. Оборачивать в него всех детей сетки не нужно — обычный элемент и так встаёт в следующую свободную ячейку. GridItem нужен только там, где ячейке требуется своё место: растянуться на несколько колонок или строк, встать в именованную область, начаться с конкретной дорожки.

Своего display, фона и отступов у компонента нет — он прозрачная обёртка, всё оформление задаёт хост через className. Место ячейки применяется правилом с нулевой специфичностью, поэтому переданный className переставляет её и внутри медиазапроса — @media (width >= 900px) { .wide { grid-column: span 2 } }. Хостовый style перебивает пропсы всегда.

colSpan и rowSpan — это длина: colSpan={2} разворачивается в span 2 / span 2 и занимает две колонки от текущего места. colStart / colEnd / rowStart / rowEnd — наоборот, границы по номерам дорожек, и граница нумеруется по линиям, а не по колонкам: colStart={2} colEnd={4} даёт две колонки, а не три. Значение "auto" возвращает ячейке автоматическое размещение.

rowSpan работает так же, как colSpan, но по вертикали. Высоту растянутой ячейке дают строки, которые она перекрыла, поэтому соседи в этих строках определяют её размер.

Когда ячейку нужно поставить в конкретное место, а не просто растянуть, используются colStart / colEnd (и их строчные пары). Нумеруются линии сетки: в четырёхколоночной сетке colStart={2} colEnd={4} занимает вторую и третью колонки, а первая остаётся пустой.