Move grandchildren elements in CSS grid-template-areas items around

Issue

I'm trying to learn about grid-template-areas.

But my code is not working like the intended area template:

"title title"
"both-a both-b"
"left-a right-a"
"left-b right-b"

All left items should be to the left of the corresponding ("a" or "b") right items.

* {
  border: 1px solid black;
}

.wrapper {
  display: grid;
  grid-template-areas: "title title"
                       "both-a both-b"                       
                       "left-a right-a"
                       "left-b right-b";
}

.wrapper > header {
  grid-area: title;
}

.both > .topic-a {
  grid-area: both-a;  
}

.both > .topic-b {
  grid-area: both-b;  
}

.left > .topic-a {
  grid-area: left-a;
}

.left > .topic-b {
  grid-area: left-b;
}

.right > .topic-a {
  grid-area: right-a;
}

.right > .topic-b {
  grid-area: right-b;
}


.left-side {
  color: red;
}

.right-side {
  color: blue;
}

<article class="wrapper">
<header><h1>Title</h1></header>

<section class="both">
<section class="topic-a">
<ol>
<li>both-A 1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>
</section>
<section class="topic-b">
<ol>
<li>both-B 1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>
</section>
</section>

<section class="left-side">
<section class="topic-a">
<ol>
<li>left-A 1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>nth item</li>
<li>nth item</li>
<li>nth item</li>
<li>nth item</li>
<li>nth item</li>
</ol>
</section>
<section class="topic-b">
<ol>
<li>left-B 1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>
</section>
</section>

<section class="right-side">
<section class="topic-a">
<ol>
<li>right-A 1st item</li>
<li>2nd item</li>
<li>3rd item</li>
</ol>
</section>
<section class="topic-b">
<ol>
<li>right-B 1st item</li>
<li>2nd item</li>
<li>3rd item</li>
<li>nth item</li>
<li>nth item</li>
<li>nth item</li>
<li>nth item</li>
<li>nth item</li>
</ol>
</section>
</section>

</article>

I know it's probably a silly mistake, but I can't figure it out.

Solution

Alright, maybe this will help someone.

It's not possible to do what I want, because both CSS flexbox and grid only have direct children as items (so grandchildren are not possible items).

Therefore, I had to exclude two sections and put both left-ab and right-ab under a same parent. This way, I can have left-a next to right-a, and left-b next to right-b.

This is the resulting code:
(my CSS skills are very poor, corrections would be very welcome!)

* {
  border: 1px black solid;
}

.wrapper {
  display: grid;
  grid-template-areas: "title" "both" "left-right";
}

.wrapper>header {
  grid-area: title;
}

.both {
  grid-area: both;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
}

.both>* {
  flex: 1;
}

.left-right {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

.left-right>* {
  flex: 1;
  min-width: 40%;
}

.both>.topic-a {
  order: 1;
}

.both>.topic-b {
  order: 2;
}

.topic-a.left-side {
  order: 3;
}

.topic-b.left-side {
  order: 5;
}

.topic-a.right-side {
  order: 4;
}

.topic-b.right-side {
  order: 6;
}

.left-side {
  color: red;
  background-color: #FCC;
}

.right-side {
  color: blue;
  background-color: lightblue;
}

<article class="wrapper">
  <header>
    <h1>Title</h1>
  </header>

  <section class="both">
    <section class="topic-a">
      <ol>
        <li>both-A 1st item</li>
        <li>2nd item</li>
        <li>3rd item</li>
      </ol>
    </section>
    <section class="topic-b">
      <ol>
        <li>both-B 1st item</li>
        <li>2nd item</li>
        <li>3rd item</li>
      </ol>
    </section>
  </section>

  <div class="left-right">


    <section class="topic-a left-side">
      <ol>
        <li>left-A 1st item</li>
        <li>2nd item</li>
        <li>3rd item</li>
        <li>nth item</li>
        <li>nth item</li>
        <li>nth item</li>
        <li>nth item</li>
        <li>nth item</li>
      </ol>
    </section>
    <section class="topic-b left-side">
      <ol>
        <li>left-B 1st item</li>
        <li>2nd item</li>
        <li>3rd item</li>
      </ol>
    </section>



    <section class="topic-a right-side">
      <ol>
        <li>right-A 1st item</li>
        <li>2nd item</li>
        <li>3rd item</li>
      </ol>
    </section>
    <section class="topic-b right-side">
      <ol>
        <li>right-B 1st item</li>
        <li>2nd item</li>
        <li>3rd item</li>
        <li>nth item</li>
        <li>nth item</li>
        <li>nth item</li>
        <li>nth item</li>
        <li>nth item</li>
      </ol>
    </section>


  </div>

</article>

Answered By - flen