CSS Grid: Использование элемента для охвата элементов сетки?

Question

Я создал типичный макет с использованием CSS Grid со следующей структурой:

<div class="dashboard">
  <header></header>
  <nav></nav>
  <div class="main-header"></div>
  <div class="main-content"></div>
  <div class="main-footer"></div>
</div>

Теперь, в связи с нашей средой (PHP, Smarty Templates, AngularJS), я хотел бы разделить их на отдельныекомпоненты.Но вот в чем проблема ... Я не могу обернуть элемент вокруг элементов сетки, не нарушив компоновку:

<div class="dashboard">
  <header></header> <!-- component -->
  <nav></nav> <!-- component -->

  <div class="wrapper"> <!-- component -->
    <div class="main-header"></div>
    <div class="main-content"></div>
    <div class="main-footer"></div>
  </div>

</div>

Я экспериментировал с вложением другой сетки внутри «обертки», но это вызывает больше проблем с компоновкой, например, неправильная прокрутка.(… И вложенные сетки не кажутся хорошей идеей).

Мне интересно, есть ли какой-нибудь CSS для «прохождения» через div «wrapper» для поддержания свойств сетки css?

Или есть другой способ справиться с этой ситуацией?

Спасибо!