在CSS网格模板区域项目中移动孙子元素

Question

我正在努力学习CSS grid-template-areas。

但是我的代码不像预期的区域模板那样工作：

“标题” “both-a both-b” “左 - 右 - 一” “left-b right-b”

所有左侧项目应位于相应（“a”或“b”）右侧项目的左侧。

* {
  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>

我知道这可能是一个愚蠢的错误，但我无法弄清楚。

感谢任何帮助和Merry X-mas！:)

Answer 1

好吧，也许这会对某人有所帮助。

我不可能做我想做的事，因为CSS flexbox和grid只有直接的孩子作为项目（所以孙子不是可能的项目）。

因此，我必须排除两个部分，并将left-ab和right-ab放在同一个父级下。这样，我可以在left-a旁边有right-a，在left-b旁边有right-b。

这是结果代码： （我的CSS技能非常差，非常欢迎更正！）

* {
  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>