移动 CSS grid-template-areas 项目中的孙元素

Question

我正在尝试了解 grid-template-areas。

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

"title title"
"both-a both-b"
"left-a right-a"
"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>

我知道这可能是个愚蠢的错误，但我想不通。

Answer 1

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

不可能如我所愿，因为 CSS flexbox 和 grid 都只有直接的 children 作为项目（所以孙子不是可能的项目。

因此，我不得不排除两个部分并将 left-ab 和 right-ab 放在同一个父项下。这样，我可以在 right-a 旁边添加 left-a，在 right-b 旁边添加 left-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>

Answer 2

您可以通过在其中使用 display: contents; 来绕过 子（第 2 级） 元素。因此 grandchild（第 3 级） 元素将受到 parent（第 1 级） 网格的影响。

* {
  border: 1px solid black;
}

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

.both,
.left-side,
.right-side {
  display: contents; /* Bypass direct Child */
}

.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-side>.topic-b {
  grid-area: left-b;
}

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

.right-side>.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>

移动 CSS grid-template-areas 项目中的孙元素

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

html

css

css-grid