Olá, boa noite! Estou criando um layout mobile first com o CSS Grid e me ocorreu uma dúvida. Criei o layout do body com o display grid e defini as propriedades (vou mandar um escopo genérico do que fiz)

body{
display: grid;
grid-template-areas:
        "barra-de-progresso" 
        "header"
        "main"
        "footer";
    grid-template-columns: 100%;
    grid-template-rows: 20px auto 100vh auto auto;
}

E nisso, defini 5 seções no main

<div class="barra-de-progresso"> ... </div>
<header class="header"></header>
<main class="main">
    <section class="a"></section>
    <section class="b"></section>
    <section class="c"></section>
    <section class="d"></section>
    <section class="e"></section>
</main>
<footer class="footer"></footer>

E no main também defini o display como GRID

display: grid;
    grid-area: a-content;
    grid-template-areas:
        "a" 
        "a"
        "c"
        "d"
        "e";
    grid-template-columns: 100%;
    grid-template-rows: calc(100vh - 75px) repeat(4, 100vh);

E defini um grid-area para cada seção

.a{ grid-area: a; }
.b{ grid-area: b; }
.c{ grid-area: c; }
.d{ grid-area: d; }
.e{ grid-area: e; }

E por fim, dentro da seção a eu também quero definir um layout em grid, mais ou menos assim

.a{
display: grid;
grid-template-columns: auto;
    grid-template-rows: repeat(2, 50%);
}

Porém, ainda não defini o grid-area para as demais partes do body e nisso o layout da <section class="a"></section> fica quebrado.

Gostaria de saber se isto é correto de se fazer, ou como posso concertar este erro. Gostaria de usar o display: grid pois com o flex-box eu sei fazer mas quero aprender a utilizar o CSS Grid

Se estiver muito confuso o escopo eu posto o código completo do projeto aqui :D

Abraços