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

Question

我有一个主 CSS 网格，它在两个不同的 block 中包含另外两个网格(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 应用于 。内部元素。

.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。