Grid

Grid — примитив раскладки: div с display: grid, у которого свойства грида вынесены в пропсы. Нужен там, где раскладка двумерная — карточки в несколько колонок, шапка-сайдбар-контент, сетка полей формы.

Своих отступов, фона и размеров у компонента нет: он занимает ширину родителя, остальное задаёт хост. Шаблоны — обычные CSS-значения (repeat(3, 1fr), minmax(0, 1fr)), а gap берёт ступень шкалы отступов: gap="2x" разворачивается в var(--space-2x). Шкала закрытая — значение вне ступеней от 0-5x до 12x не скомпилируется; разовое исключение задаёт хост через style={{ gap: "13px" }} или свой класс.

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

Набор пропсов намеренно короткий: тут только то, что описывает саму сетку. Место контейнера в родительской сетке (grid-column, grid-row), inline-grid и всё остальное CSS — через className.

Адаптивных значений у самих пропсов нет, но сетку по брейкпоинтам можно менять обычным CSS-модулем: значения пропсов уезжают в CSS-переменные и применяются правилом с нулевой специфичностью, поэтому переданный className перебивает их внутри медиазапроса без !important — @media (width >= 900px) { .cards { grid-template-columns: repeat(4, 1fr) } }. Перебивать нужно само свойство, а не переменную: инлайновая --grid-template-columns выигрывает у любого класса. Часто медиазапрос и не нужен — repeat(auto-fit, minmax(...)) считает адаптивность сам. Хостовый style тоже перебивает пропсы — это запасной выход для отступа вне шкалы. className дописывается к базовому классу и display не затирает.

templateAreas описывает раскладку картинкой из имён, а GridItem встаёт в свою область по area. Так набирается каркас экрана: ширины колонок остаются в templateColumns, а места ячеек читаются прямо из строк шаблона.

gap задаёт один отступ на обе оси; когда нужны разные — columnGap и rowGap. Значения — те же ступени шкалы.