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

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 --没有任何效果。

请记住，https://www.w3.org/TR/css3-grid-layout/#grid-concepts的作用域是父-子关系。不是网格容器子元素的元素不是网格项，将忽略网格属性。因此，如果要将网格容器属性应用于父级，而将网格项属性应用于子级，则始终必须使用display: grid或display: inline-grid。