我可以将网格的元素设置为另一个网格的区域吗？

Question

我有一个主 CSS 网格，它在两个不同的块中包含另外两个网格（1 和 2）。 每个网格都定义了自己的区域，并且每个“网格项”都设置在各自的区域中（例如：grid-area: top1;）。

这是一个 html 示例：

.main-grid {
  display: grid;
  grid-template-columns: 200px;
  grid-template-rows: auto;
  grid-template-areas:
    "left"
    "right";

  @media screen and (min-width: 40em) {
    grid-template-columns: 100px 50px;
    grid-template-areas:
      "left right";
  }
}

.grid-1 {
  grid-area: left;
}

.inner {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto;
}

.grid-1 .inner {
  grid-template-areas:
    "top1"
    "bottom1";
}

.grid-2 {
  grid-area: right;
}

.grid-2 .inner {
  grid-template-areas:
    "top2"
    "middle2"
    "bottom2";
}


.item-a, .item-b, .item-c, .item-d, .item-e {
  border: 1px solid black;
  text-align: center;
}

.item-a {
  grid-area: top1;

  @media screen and (min-width: 40em) {
    height: 50px;
  }
}
.item-b {
  grid-area: top2;

  @media screen and (min-width: 40em) {
    height: 50px;
    grid-area: bottom1;
  }
}
.item-c {
  grid-area: bottom1;

  @media screen and (min-width: 40em) {
    grid-area: top2;
  }
}
.item-d {
  grid-area: middle2;
}
.item-e {
  grid-area: bottom2;
}

<div class="main-grid">
  <div class="grid-1">
    <div class="inner">
      <div class="item-a">A</div>
      <div class="item-b">B</div>
    </div>
  </div>

  <div class="grid-2">
    <div class="inner">
      <div class="item-c">C</div>
      <div class="item-d">D</div>
      <div class="item-e">E</div>
    </div>
  </div>
</div>

我想知道是否可以将.item-a 设置为.grid-2 的区域？

由于某种原因，媒体查询在这里不起作用，所以我创建了一个Codepen snippet in scss

Answer 1

我并不完全清楚你要做什么。

但这里有一点需要注意：

您已将grid-template-columns、grid-template-rows 和grid-template-areas 应用于.inner 元素。

.grid-1 .inner {
  grid-template-columns: 100%;
  grid-template-rows: auto;
  grid-template-areas: "top1" "bottom1";
}

.grid-2 .inner {
  grid-template-columns: 100%;
  grid-template-rows: auto;
  grid-template-areas: "top2" "middle2" "bottom2";
}

这些是网格容器属性。除非元素还具有display: grid 或display: inline-grid，否则它们将不起作用。在您的代码中，.inner 元素是 display: block（默认）。

因为.inner 不是网格容器，分配给其子元素的网格属性（.item-a 到.item-e）无效。

请记住grid formatting context 的范围是父子关系。不是网格容器子元素的元素不是网格项，将忽略网格属性。因此，如果要将网格容器属性应用于父级并将网格项属性应用于子级，则始终必须使用 display: grid 或 display: inline-grid。