Сss modules плюс grid в React?

Question

[formasters777]

У меня 11 строк на главной странице в css grid, в каждой строке компонент.
Саму настройку grid-template-rows добавил в index.css к идентификатору #root,
но является ли это правильным?

#root {
  display: grid;
  /* grid-template-columns: 10% 80% 10%; */
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-items: stretch;
  align-items: stretch;
}

Небольшое дерево:
index.css глобальные стили =>
у каждого компонента по стилю name.modules.css,
можно было сделать ещё компонент в app.js, но эта обёртка лишняя,

root.render(
  <React.StrictMode>
компоненты без div root?
  </React.StrictMode>
);

Можно ли добавить все компоненты вместо div id="root"?
читал, что там проблемы могут быть,
после зашёл посмотрел список сайтов сделанных на React, и увидел у shopify, также есть корневой root div.
Но в данном случае, если у меня есть 11 компонентов на главной странице, не будет ли это влиять на скорость загрузки дерева DOM, смогу ли я потом добавить код, для загрузки контента по необходимости, если юзер будет спускаться вниз, чтоб лишнее не грузилось?